CODEWITHSUNDEEP
cssjoomlatwitter-bootstrap-3
DDA
DDA

Reputation: 27

Drop down menu parent gets hidden by bootstrap in joomla

I using joomla 3.3.3 and boostrap 3.2.0

I have edited joomla menu module source to incorporate bootstrap classes to create drop down menus.

Browser renders drop down list as:

<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after
</ul>

The dropdown itself works fine (including with a third party hover js and css added). For some reason if I use href="#" for the parent of the drop down (so it doesn't link to a page) the li holding the parent drop down gets hidden as shown below:

<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav" style="display: none;"> <===**** DISPLAY NONE GETS ADDED
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after

</ul>

Bootstrap css for the nav li is:

.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

The display: block on the first nav > li rule seems to get disabled for some reason. Any help would be appreciated.

Upvotes: 0

Views: 1307

Answers (1)

Seth Warburton
Seth Warburton

Reputation: 2413

First up you shouldn't edit the menu module, you should instead create an alternative module layout for it which can then be selected from the (un-hacked) menu module.

What you are seeing is a conflict with Mootools, use of which is not supported in combination with Bootstrap. jQuery and Mootools (specifically mootools-more.js) are conflicting and as Bootstrap is dependant on jQuery you should not be loading Mootools as well.

p.s. There is a joomla.stackexchange.com now :)

Upvotes: 1

Related Questions