I have a menu and a submenu in different divs. There is a space between them. How can I make them look like a one whole menu? I used bootstrap navbar for main menu and simple nav for submenu. I'm very newbie in css. this is what I have:
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Website Logo</a>
<ul class="nav">
<li class="active">DashBoard</li>
<li>Docs</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account<b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 250px;">
<li>Dashboard</li>
<li>LogOut</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul class="nav nav-pills">
<li class="active">
Stats
</li>
<li>Api Calls</li>
<li>Settings</li>
</ul>
</div>
jsfiddle
I just want to remove the space between them.
And one more little question:
how can I get rid of a little caret between button and it's dropdown? (white triangle between Account nav item and it's dropdown)
Your first question can be answered by removing the default margin-bottom for the class navbar:
.navbar {
margin-bottom:0
}
Now, for your second question. There is a triangle created using borders on your dropdown-menu. You can disable this with this css:
.navbar .nav > li > .dropdown-menu:after {
border:none;
}
Add the following CSS to remove the margins:
.navbar{
margin:0px;
}
JS Fiddle: http://jsfiddle.net/eszf7/3/
Related
I am working on a clients website on Shopify and for some reason the dropdown menu seems to go underneath the product display and filter. I have tried changing the z-index but have had no luck.
Would anyone know what the issue might be? Here is a link to the page having trouble: https://livingtextiles.com/collections/test-collection
<header id="header" style="background-color:#fff!important;">
<div class="header-top pbf-header-top">
<div class="container pbf-container">
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="logo">
<img src="https://cdn.shopify.com/s/files/1/1568/4679/files/wholesale-logo.png?16165857088723477752">
</div>
<nav class="menu-top">
<ul>
<li class="level-1 dropdown">
<a class="dropdown-toggle a1 pbf-ws-text" data-toggle="dropdown" title="Living Textile Brands" style="color:#0c3056!important;font-size: 23px;padding-right:20px;">SHOP BY BRANDS</a>
<ul class="menu-level2 dropdown-menu pbf-column">
<div>
<li class="level2"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/living-textile-ws-logo.png?15789627674492600681"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/lolli-living-ws-logo.png?11306798353806545224"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/poppi-living-ws-logo.png?11306798353806545224"></li>
</div></ul>
<li class="level-1 dropdown">
Collections
<ul class="menu-level2 dropdown-menu">
/*** CSS ***/
#header {
display: block;
float: left;
width: 100%;
}
set position:relative and z-index:99 to the #header, this will fix your problem
#header {
position:relative;
z-index:99;
}
Here is the navbar html
<div class="row">
<div class="col-xs-12">
<nav class="navbar" id="nav_menu">
<ul class="nav navbar-nav">
<li class="item">Home</li>
<li class="dropdown item open">
About us
<ul class="dropdown-menu">
<li>People</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
And the problem is the size is restrict to the navbar height, that means the dropdown box can not go beyond the nav bar size. I suspect it is not caused by z-index after checking. It is something related to the overflow, but any element tag need to change?
Thanks for helping
The test link:
http://kotechweb.com/kmk/
<div class="row" style="overflow:visible;"></div>
get rid of
.left_menu_body {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
really don't understand why you did that crazy "hack" on .left_menu_body
I'm trying to create a navbar using bootstrap, but I can't seem to get rid of the small space beneath each tab. Can anyone help?
Code:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Baseline Assessment</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">Step 1: Verification</li>
<li>Step 2: Par-Q</li>
<li>Step 3: Exercise History</li>
<li>Step 4: Decision</li>
</ul>
</div>
</nav>
Thanks.
Apply Padding Adjustments
Try making the padding large enough to match your navbar-brand element which is explicitly making the menu larger due to it's height of 50px :
.nav>li>a {
position: relative;
display: block;
/* Adjusting this from 10px 15px to 15px should push the rows down */
padding: 15px;
}
You can see an example of what this change looks like below :
Consider Responsive Utility Classes
You might also consider performing some type of truncation of the content of your menu items as well, as smaller resolutions will result in a "wrapping" effect. Bootstrap's available responsive utility classes can help mitigate this issue :
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">
<a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab">
<span class='hidden-sm'>Step 1: Verification</span>
<span class='visible-sm'>Verification</span>
</a>
</li>
<!-- Do this for each <li> element -->
</ul>
You can see this in action here and demonstrated below :
I'm trying to change the navbar in my child theme but I'm a newbie. I read some questions here about that and even saw the bootstrap site, but I don't understand how to solve my problem. I'm sorry for my ignorance but could someone explain to me how it works?
I'm using this theme http://demos.codexcoder.com/#limo_wp and I would like to fixed the navbar instead of this "blink" and float. Just stay fixed after scroll the page.
You can find an example on the bootstrap website.
http://getbootstrap.com/examples/navbar-fixed-top/
Or you can change
<section id="headnev" class="navbar topnavbar">
to
<section id="headnev" class="navbar navbar-fixed-top">
in your header file and remove:
// Script for top Navigation Menu
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > 100) {
jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar');
jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin');
} else {
jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar');
jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin');
}
});
from custom.js
The following command:
Fixed to top:
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
If you want to fixed menu after scroll the page. You use fllowing javascript code. In this code fixed menu after if scrolls over a specific element. I wrote the following code based on your template.
<script>
if ( $('body').scrollTop() > $('.section-a').position.top ) {
$('#headnev').removeClass('topnavbar');
$('#headnev').addClass('navbar-fixed-top');
}
</script>
just add a class="nav navbar navbar-fixed-top"
I'll give you an example of my code, just use it and see how it works.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container" id="container">
<div class="navbar-header">
<div class="navbar-brand">Project Nature</div>
<button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active dropdown">
Nature <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="#">Plants</a></li>
<li><a href="#">Landscapes</a></li>
<li><a href="#">Animals</a></li>
<li><a href="#">Elements</a></li>
</ul>
</li>
<li>Gallery</li>
<li>Blah</li>
<li>Contact</li>
<li class="dropdown">
Social Media <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
This will generate a navbar with a heading (title)
5 menu items of wich 2 are dropdowns.
Greetings :)
You would need to add something like the following CSS to a child theme to override this behavior in the parent theme.
#header .navbar {
animation:none !important;
}
If you aren't familiar with WordPress child themes, here is a good resource for you. There may even be a theme setting for this. Depends on what the theme developer made available in the theme's options.
In the navbar div, you should add the class name .navbar-fixed-top.
You could try my css also, simple yet effective if you are positioning it always on the top
.navbar{
position:fixed;
width:100%;
z-index: 1000000;
top:0;
}
I'd like to override the font color when I hover over a tab/link on my navbar. I currently have the following HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class = "container">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
</ul>
<ul class ="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li >Link</li>
</ul>
</div>
</div>
</div>
I just would like the tabs on the right to turn a different color. I understand pseudoselectors, I'm just wondering how I'd properly do this with my own CSS. Thanks!
If the selector is specific enough, you can avoid usage of !important. In this case, you would use:
.nav.pull-right > li > a:hover {
/* style .. */
}
jsFiddle example
Alternatively, you could also use .navbar-inner .container .nav.pull-right > li > a:hover