I'm wondering on how I can center the bootstrap 3's navbar menu items. I know they have included a .nav-justified class but that will just conflict with navbar-nav if used together. I belive it is being looked into by the dev team.
So is there any work around with CSS that I can achieve a navbar that will keep the navbar menu items/links justified even when the container it is in is re-sized.
Here's a Jsfiddle for you if you need it.
The .nav-justifed class is to be used with nav-tabs / nav-pills (see bootstrap docs) and not nav-bar. The two concepts are very different and should not be confused.
However, you can achieve the effect you are looking for by adding the following css:
.navbar-nav.nav-justified > li{
float:none;
}
nav-justifiednow plays nice with navbar-nav:
<ul class="nav navbar-nav nav-justified">
See updated jsFiddle.
If using LESS, you can do the following:
.navbar-nav {
.nav-justified;
}
Related
I think Bootstrap is very hard to understand and override using CSS overriding rule (I don't really want to create my own custom Bootstrap CSS because really it's not very flexible, just one small change will require us to rebuild a new version of Bootstrap from the LESS source code).
What I want here is just simple that when hovering on a link (in a navbar), change its background to my own color, not the ugly default color Bootstrap sets. So even when I define an Id for my link element, CSS rule still does not work at all.
li#li#li#li#li#li#li#li:hover {
background-color:red!important;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" id="menu">
<ul class="nav navbar-nav">
<li id="li">Test</li>
</ul>
</div>
As you can see even with that CSS rule, it cannot be overridden? Or I'm wrong with the actual element whose background is changed on hovering (while I think it should be actually the li element)?
Also I'm wondering if someone could explain to me by how Bootstrap could make that magic happen. I would like to apply that same magic in my own CSS plugin, it may be helpful in some case.
it's the a link element that's getting that background
#li:hover a {
background-color:red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" id="menu">
<ul class="nav navbar-nav">
<li id="li">Test</li>
</ul>
</div>
I'm working on a project(using bootstrap) and I can't seem to figure out why my nav is still stacked up instead of being laid out horizontally. I've tried just about everything I can think of and even sought help online where I'm learning to code but they couldn't figure it out either. They told me it should be working and in fact it does work in their code editor, it just doesn't work on my computer which is where the files are located since I don't have web hosting and I'm just learning. I also noticed that in my browser the nav pull-right works and the links are on the right hand side(although they're still not horizontal) but when I ran it through here where it says "run code snippet" the nav appears right underneath the img placeholder, don't know if that means anything but I thought I'd include that bit of information.
header nav ul{
display: inline-block;
}
<header>
<div class="container">
<div class="row">
<img id="logo" src="http://placehold.it/150x150">
<nav>
<ul class="nav pull-right">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
enter image description here
Do you mean you want to make the navigation to align horizontally?
Then you can try using this
header nav ul li {
display: inline-block;
}
working example here.
The reason your method doesn't work is because you apply to ul instead of the li element.
I have a navigation bar set up using nav-pills. I have the bar horizontal and justified, so they all line up nicely, but I want to change the width of the nav-pills so that I can make them more even with the everything else on the website. Here is my code for the navigation bar:
<div class="container" id="buttonBar">
<ul class="nav nav-pills nav-justified">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>VIDEO</li>
<li>PHOTOGRAPHY</li>
<li>ARTIST PORTFOLIOS</li>
</ul>
</div>
On a custom CSS file I made, I tried doing the following:
.nav .nav-pills .nav-justified li a {
width: 50px;
}
But to no avail. What would be the right way for me to do this? And could anyone also tell me how to change the color of both the text and the color of the nav-pill? I want to make the background color transparent.
Your CSS selector is incorrect. The space between the first three classes means that they are children, and not that the element has all three classes.
Try this instead :
.nav.nav-pill.nav-justified li a {
width: 50px;
}
If you can't get it to work, a fiddle or something would be useful.
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
I'm new to Bootstrap/PHP, so please be gentle :-)
The code is as follows:
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright 2014 by ABC</p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Support<b class = "caret"></b>
<ul class = "nav navbar-nav navbar-right dropdown-menu">
<li>Help</li>
<li>FAQ</li>
<li>How To</li>
</ul>
</li>
</ul>
</div>
</div>
This creates a navbar on the bottom of the page with a drop-up menu.
The navbar has an inverse colour, so the text has been set to white to maximise the contrast.
Unfortunately the result is white text on a white background when attempting to select from the menu.
My guess is that I need to override Bootstrap's CSS, but I'm not sure what to override.
And I would prefer not to screw with Bootstrap's CSS file just in case I blow everything.
Many thanks
You have overridden link color by adding an inline style style="color: #ffffff;". This is a bad practice as it’ll take precedence on all other declarations to this element (:hover, :active, …).
If you want to change Bootstrap defaults, you should better do it in a separated CSS file. In this case the style would be:
.navbar-inverse .navbar-nav>li>a {
color: white;
}
You have extra classes on your dropdown
<ul class="nav navbar-nav navbar-right dropdown-menu">
It should be
<ul class="dropdown-menu">
You can see the result here.
The above ans, by LeBen is pretty much fine. But, while working on Bootstrap, keep an eye while overriding Bootstrap CSS. You can easily play it first in Firebug then override, and place a common comment with its description so you can easily make it out. And, while overriding make sure it wont affect the other part in the project, so think before overriding it