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.
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 :)
Related
https://codepen.io/arandomcodepenuser/pen/NWjYGwo
Ok, so I have this top navbar, and the problem is that I can't change the html only the styling, because I am using a Wordpress plugin, and this navbar has block elements on the navbar, and there's one of them that has a dropdown within the element and not below, and I can't use javascript to change this, I am wondering if it's possible for the dropdown embedded within the li element to push down the other elements on the navbar when it appears on hover.
Here's the html:
<div>
<ul class="top-bar__menu">
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280208" class="">
<span>About</span>
<ul class="sub-menu">
<li id="menu-item-268209" class=""><span>About Us</span></li>
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280209" class=""><span>Our Team</span></li>
</ul>
</li>
</ul>
</div>
Here's the css styling for the dropdown menu:
.sub-menu {
display: block;
}
.sub-menu li {
clear:both;
width: 100%;
}
ul.sub-menu {
display: inline;
background-color: #fff;
max-width: 100px;
}
Very basic CSS issue as I can't get the current page to look different in menu. Any suggestion greatly appreciated!
Here is the genesis function
//* Add My New Menu
function my_new_menu() {
echo '<ul class="menu gn responsive-menu">
<li class="menu-item"> New Joke Book!</li>
<li class="menu-item"> Kids Jokes </li>
<li class="menu-item"><a href="/animal-jokes/"> Animal Jokes /a></li>
<li class="menu-item"> Zoo Jokes </li>
<li class="menu-item"> Contest </li>
</ul>';
}
add_action( 'genesis_header_right', 'my_new_menu' );
Here is the CSS
.gn a {
border: 1px solid transparent;
border-radius: 3px;
color: #438ed9;
display: block;
font-weight: 400;
height: auto;
line-height: 1;
margin-top: 0.2rem;
padding: 0.8rem 1rem;
position: relative;
text-decoration: none;
}
.gn a:hover,
.gn .current-menu-item > a,
.gn .sub-menu .current-menu-item > a:hover {
color: #fff;
background-color: #009900;
}
The easiest solution is to add your ".current" class to the corresponding "li" item.
So, for example if you are on the "kids-joke-book" page your "ul" should look like this:
<ul class="menu gn responsive-menu">
<li class="menu-item current"> New Joke Book! </li>
......
</ul>
You should do this method on every single subpage of your site where you use this menu, and add the "current" class to the correct menu item.
("current" class is an example name, it has the styles what you would like to add to the right menu item.)
I have tabs like these:
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
Tab 2
</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
Tab 3
</a>
</li>
</ul>
But instead of having them on the left, I'd like them in the center. I tried text-align:center; and even setting margin-left:0 and margin-right:0 but neither is working. What's the easiest way to do this without re-writing the whole code?
Here's a jsFiddle:
http://jsfiddle.net/j751b1mb/
.nav-tabs > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-tabs {
text-align:center;
}
http://jsfiddle.net/j751b1mb/4/
In Bootstrap 4:
<ul class="nav nav-tabs justify-content-center">
You have added a lot of custom CSS, but the easiest Bootstrap way is to use nav-tabs and nav-justified..
http://www.codeply.com/go/upP3lh2gxS
<ul class="nav nav-tabs nav-justified">
<li>..</li>
..
Here is an updated fiddle: http://jsfiddle.net/j751b1mb/5/
The key is to set display: flex on the nav tabs and align them in the center of the page.
.nav-tabs {
display: flex;
justify-content: center;
flex-direction: row;
}
You can get more fine-grained control over the specific position of the tabs by modifying the margins on .tabbable-line > .nav-tabs > li
.tabbable-line > .nav-tabs > li {
margin: auto 2px;
}
The code above will distribute them evenly across the line, for example.
Hope that helps.
try this and replace with this
.nav-tabs > li
{
float: none;
text-align: center;
}
.nav > li
{
display: inline-block;
}
Change in css
.tabbable-line{
text-align:center;
}
/* Default mode */
.tabbable-line > .nav-tabs {
display:inline-block;
}
DEMO
Use text-center or text-middle class on your main element.
I'm quite new to Bootstrap, I've set up a dropdown pill and played around with the colours.
What I'd like to do is change the colour of the dropdown title pill after it has been selected. It currently changes to a light grey:
Here is my code:
<div class="row hidden-xs">
<div class="col-md-12">
<ul class="nav nav-pills nav-justified nav-filter">
<li role="presentation">Valentine's Day</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Recipient <span class="caret"></span>
</a>
</li>
<li role="presentation">Occasion</li>
<li role="presentation">Type</li>
<li role="presentation">New</li>
<li role="presentation">On Sale</li>
</ul>
</div>
</div>
What would the CSS be to overide this colour? - not the dropdown itself, just the title link.
Thanks
You would override the hover, active and focus state of .nav-pills like this..
.nav-pills>li>a:hover {
background-color: #FF6699;
}
.nav-pills .open>a, .nav-pills .open>a:active, .nav-pills .open>a:focus{
background-color: #FF6699;
}
Demo
This will change the background/text color of the active class (inc. focus):
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus {
color: white;
background-color: blue;
}
Use following css:
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
background-color: red;
}
.nav-tabs>li>a:hover {
background-color: red;
}
DEMO
.nav>li>a:hover,.nav>li>a:visited {
background-color: #222; /* add your desired color */
}
I try to create a dropdown menu with CSS for a Wordpress template. When I hover a menuitem (e.g. "Cupcake Ipsum" like you can see on the picture), the whole menu is displayed in a weird way.
I hope the picture is self-explanatory enough. The menuitem "Cupcake Ipsum" is hovered on the bottom view of the menu:
My HTML code (from firebug) is:
<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://whatever.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
Cupcake Ipsum
<ul class="children">
<li class="page_item page-item-388">
Red Velvet Cupcake
</li>
<li class="page_item page-item-390">
Mango Cupcake
</li>
<li class="page_item page-item-392">
Chocolate Cupcake
</li>
</ul>
</li>
<li class="page_item page-item-43">
Bacon Ipsum
<ul class="children">
<li class="page_item page-item-405">
</ul>
</li>
<li class="page_item page-item-45">
Veggie Ipsum
<ul class="children">
<li class="page_item page-item-397">
Tomato
</li>
<li class="page_item page-item-399">
Lettuce
</li>
<li class="page_item page-item-401">
Broccoli
</li>
<li class="page_item page-item-403">
Onion
</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS code is:
#menu ul li a {
text-decoration: none;
color: #CCCCCC;
font-size: 16px;
padding: 10px;
display: block;
position:relative;
}
#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}
#menu ul li ul li a {
clear: left;
line-break: strict;
background-color: #006699;
padding: 5px;
font-size: 10px;
}
#menu ul li ul li {
display: block;
float: none;
clear: left;
}
.menu ul li {
display: inline-block;
position: relative;
}
.menu li ul {
position: absolute;
}
.menu li:not(:hover) ul {
display: none;
}
I want to create a dropdown menu where one subitem is below the other. Tried a lot but I cannot manage to arrange the subitems correcly.
What did you omit? Your exact code in this fiddle works, check your css, you have something overriding some of your rules, check each element, see when the rules you pasted here are overwritten.
Can you put your code in a jsfiddle? Until then, I can tell you that one of your sub elements of the main <li> is display: block; and pushing the other top level <li>'s out of placement.