I have created navigation in center with below code HTML and CSS code
HTML Code
<nav class="navbar navbar-inverse navbar-fixed-top navbar-inner" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>PROFILE</li>
<li>BUSINESS SOLUTIONS</li>
<li>PRODUCTS</li>
<li>PARTNERS</li>
<li>CAREERS</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS code
.navbar .nav, .navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; }
.navbar-inner { text-align:center; }
It looks like this
But I was looking like Home on active and hover. How can I do that
I was looking of small red underline when menu is selected and same thing when I hover mouse on it.
Try this ,
.nav li.active a,.nav li:hover a{
background:none !important;
box-shadow:none !important;
}
Working Demo
Updated Code
.nav li.active a span,.nav li:hover a span{
border-bottom:1px solid red;
display:block
}
Updated Fiddle Demo
So with the code you have provided I did this. If you want to make any changes just let me know I will make the necessary changes. The key idea is to use:
border-bottom
and
li:hover
properties.
Here is the fiddle:
http://jsfiddle.net/L7x85dp5/
Related
I have li elements in a nav menu, and I want to center the elements in the ul. I know this question has been asked many times, but I have tried almost everything and still cannot get it to work the way I would like. Here's the relevant portion of the code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav"id="nav">
<li class="active">Home</li>
<li>Login</li>
<li>Registration</li>
</ul>
</div>
</div>
</nav>
Here's the HTML for the whole homepage
add this css code
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
i am trying to build my navigation bar using bootstrap, but i have the issues that when i have a small screen or window the mobile menu button doesn't appear in the right corner. What did i do wrong?
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
and my css:
.navbar{
background-color:#fff;
border-bottom:1px solid black;
}
.navbar-nav > li > a{
color:#1E88E5 !important;
font-size:16px !important;
font-weight:bold !important;
display: block !important;
background-color:#fff !important;
}
.navbar-nav > li > a:hover{
color:#673ab7 !important;
background-color:#f0f5f5 !important;
}
You forgot navbar style class in your nav element (navbar-default or navbar-inverse). Styling toggle button depends on this class.
<nav class="navbar navbar-default navbar-fixed-top">
including bootstrap.min.css & bootstrap.css in links would do it.
I tried without success to modify hovering effects on navbar. The idea is to make appear a small rectangle when I hover link (vertically centered). The rectangle should be smaller than the total height of the navbar.
Right now, I get a strange effect on hover link and dropdown doesn't work anymore
i created a bootply of my problem
Here, You need to add <span> tag in <a> tag. also, need to some modification in css.
HTML
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Contact</span></li>
<li class="dropdown">
<span>Dropdown <b class="caret"></b></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS
.navbar-default {
background-color: #FFFFFF;
}
ul.nav > li > a span
{
height: 28px;
display: inline-block;
line-height: 28px;
padding-right:15px; padding-left:15px;
}
ul.nav > li > a:hover span
{
background-color: #f0f0f0 !important;
border-radius: 6px !important;
}
ul.nav > li > a{padding-right:0px; padding-left:0px;}
also, Check it bootply
You have to change the height as shown below for your ul.nav
ul.nav > li > a:hover
{
background-color: #f0f0f0 !important;
border-radius: 6px !important;
height: 35px;//Change according to your wish
margin-top:5px;//You can add this too
}
Check here Bootply
I can't seem to figure out how to center the navigation items. I can place them either to the left or right but not center. Is there a simple work around?
<!-- Navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Mobile navigation button -->
<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>
<!-- Navigation items -->
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>OUR PRODUCTS</li>
<li class="active">ABOUT</li>
<li>OUR TEAM</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I've tried a few things but they're a little sloppy and caused some issues with mobile version. I'm looking for something a little more proper.
1) Use <ul class="nav nav-justified"... for the menu container.
2) Look at this codepen source:
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li
{
float: none;
display: inline-block;
}
3) Read the answer right there
There are three different ways to do something like You want, choose one.
You could easily find your answer, please try to do this alone next time, bro.
I believe you forgot to add or edit.
On your Bootstrap.css go find this class and edit on text-align:center. This will make your text navbar be centerized.
.navbar.navbar-collapse{
text-align: center;
}
If you still don't get it. You can take a look my example that i do on Bootply.
HTML
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>OUR PRODUCTS</li>
<li class="active">ABOUT</li>
<li>OUR TEAM</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
CSS
#media (min-width: 620px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
}
DEMO
You could also use some custom CSS via flexbox.
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
float: none; // overwrites Bootstrap's float value
}
Try this one
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li
{
float: none;
display: inline-block;
}
.navbar-nav > li a{
text-decoration:none;
padding-left:15px;
}
I have an idea and not sure how to get it to work.
I have a bootstrap navbar on my site that has links and a "brand". The brand is centered within the navbar using this modification. Bootply
Instead of setting the navbar up like this:
{ (link)(link)(link)(....bunch of empty space....)(BRAND)(....bunch of empty space....)(link)(link)(link) }
I would like the navbar to set up like the diagram bellow.
{ (....bunch of empty space....) (link)(link)(link)(BRAND)(link)(link)(link) (....bunch of empty space....) }
I am very new to coding so please give me some time on the response to any questions you may have.
Thanks!
Just add padding to the left of the first link.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Center 1</li>
<li>BRAND</li>
<li>Center 3</li>
</ul>
</div>
</nav>
CSS
#media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Fiddle
http://jsfiddle.net/52VtD/9483/