Does anyone know how to change the navbar such that there's less white space above/below the text. I already tried creating a negative buffer but that didn't seem to work.
Also if anybody knows how to change the navbar to a button(as often mobile sites have) so that it doesn't take up the entire height of the page that would be useful.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<body>
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
</nav>
<style>
text-align:justify;
</style>
</div>
</div>
</body>
This will do it.
ul.nav li a>h2 {
margin-top: 0;
margin-bottom: 0;
}
Here's a fiddle: https://jsfiddle.net/ypfhs1gn/1/
Also, to fix your HTML:
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</nav>
</div>
</div>
UPDATE: Additionally, here's that fiddle updated to get you that menu button: https://jsfiddle.net/ypfhs1gn/2/
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'd try setting up a CSS rule for nav > ul containing top/bottom margin and/or padding settings, starting from 0 and (if that has an effect) then changing it to a value you like.
Related
I have a bootstrap template that I am working with, however Once I was ready to start linking pages I noticed that the links to the other pages in the UL were not working as I expected. I searched through the site, tried a few of the fixes and posts however with no luck. Also if anyone can see it I have a second issue that is not as pressing at this time but the mobilized version of the menu expands but does not retract when you click on the hamburger icon. Any insight is much appreciated. Thank You in advance!
.navigation {
min-height: 70px;
}
.navigation .navbar {
border: none;
margin-bottom: 0;
min-height: 70px;
}
.navigation .navbar .navbar-brand {
color: #fff;
font-size: 40px;
font-weight: 700;
height: 70px;
line-height: 35px;
}
.navigation .navbar-default {
background-color: #0091D5;
box-shadow: 0 0px 10px rgba(0,0,0,.2);
border: none;
border-radius: 0;
clear: both;
}
.navigation .navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 500;
padding-top: 25px;
padding-bottom: 25px;
}
.navigation .navbar-default .navbar-nav>li>a:hover,
.navigation .navbar-default .navbar-nav>.active>a,
.navigation .navbar-default .navbar-nav>.active>a:hover,
.navigation .navbar-default .navbar-nav>.active>a:focus {
background: none;
color: #FFFFFF;
}
.navigation .btn-default:hover,
.navigation .btn-default:focus,
.navigation .btn-default:active,
.navigation .btn-default.active {
border-color: transparent;
}
<section id="menu">
<div class="navigation">
<div id="main-nav" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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> <!-- end .navbar-header -->
<div class="navbar-collapse collapse">
<ul id="ulnav" class="nav navbar-nav">
<li> Home</li>
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Drying Services</li>
<li>Restoration</li>
<li>Commercial</li>
<li>Reviews</li>
<li>Insurance & Financing</li>
<li>About Us</li>
<li class="cwaf-bg">Free Estimate</li>
</ul>
</div><!-- end .navbar-collapse -->
</div> <!-- end .container -->
</div> <!-- end #main-nav -->
</div> <!-- end .navigation -->
</section>
Did you include boostrap?
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head<
Issue resolved in the comments sections. This instance was related to a pre-packaged one page template which had navigation modifications in it's default JS libraries.
please do these steps.
First you have to load bootstrap.added these links to head section.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
Then You can add these code part in body section.
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> Home</li>
<li>Water Damage</li>
<li>Fire Damage</li>
<li>Drying Services</li>
<li>Restoration</li>
<li>Commercial</li>
<li>Reviews</li>
<li>Insurance & Financing</li>
<li>About Us</li>
<li class="cwaf-bg">Free Estimate</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
i check this cord.it's works without any issue.i attached snapshot also.please check it.
I'm having a lot of trouble adding a fixed black background to my bootstrapped navbar. In my CSS, I declared the background-color as black, but it doesn't seem to change anything. My own CSS is declared after bootstrap's core CSS, so it wouldn't be overridden by a default color. The nav bar shows as transparent, with opaque lettering. Not sure what the problem is, especially since I already declared the color of the navbar!
Here is the HTML for the navbar:
<div class="jumbotron">
<div class="container">
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav
And here is my CSS. Please help. I am going insane.
.jumbotron navbar-fixed-top container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
change your css from .jumbotron navbar-fixed-top container to .jumbotron .navbar-fixed-top.container I updated your code check here
.jumbotron .navbar-fixed-top.container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar-inverse jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar fixed-top">
<div class="navbar-fixed-top 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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I think this is exactly what you need
<head>
<link rel="stylesheet" href="farji.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class=" jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar-fixed-top navbar-inverse">
<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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home <span class="sr-only">(current)</span></li>>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
OPTIONAL--and if you want to change it even further with any other color use the following css:
.navbar-inverse {
background-color: #122c46;
border-color: #122c46;
}
I'm trying to change the navbar's background color to blue and the links color to white. I am not able to change the links on the navbar to white. I'm not doing something right. Not sure what. Appreciate the help!
.navbar-default {
background-color: #2196f3;
}
.navbar a{
color:white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/index.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop</li>
<li>Drive</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode</li>
<li>Help/FAQ's</li>
<li>Conatct us</li>
</ul>
</div>
</nav>
<script src = "js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
You need to be more specific with your CSS rules. See Specificity
Working Example:
.navbar.navbar-default {
background-color: #2196f3;
}
.navbar.navbar-default ul > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</div>
</nav>
Bootstrap have many default style.
You code is not working is because bootstrap override your css(same as #Kirito mention).
You can change css to this, it work:
.navbar div{
background-color: #2196f3 !important;
}
.navbar a{
color:white !important;
}
However, better solution is customize your bootstrap. link: http://getbootstrap.com/customize/
This approach will get cleaner code and less problem
Remove the .navbar a rule set and add:
/* change brand text color */
.navbar-default .navbar-brand
{
color:white;
}
/* change list links text color */
.navbar-default .navbar-nav > li > a
{
color:white;
}
You need to be more specific about your selectors or other selectors (defined in bootstrap's CSS) will apply as they are likely more specific
This is all better explained in the specificity rules
See sample code below.
nav.navbar-default {
background-color: #2196f3;
background-image: none;
}
nav.navbar-default .navbar-brand,
nav.navbar-default .navbar-nav>li>a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</nav>
</html>
I'm trying to get my hands onto some web designing and I was not able to figure out how to make the navigation buttons in my project centered. I would like the buttons from Home to Page 3 centered and was wondering if there was a simple way to do that in the HTML file alone without needing a separate CSS class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website Name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Make some changes in Bootstrap.CSS
May be like this...
.nav navbar-nav
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
Check here => bootply
The only way you can accomplish this is by adjusting some CSS properties. Basically remove the float from navbar-nav and center the text. But if you really want them to be centered, you have to account for the navbar-brand class by assigning it a width and adding a negative margin equal to half that width to the navbar-nav.
See working Example Snippets.
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Mobile Center
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
#media (max-width: 767px) {
.navbar-default .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 150px;
text-align: center;
top: 0;
}
.navbar.navbar-default > .container .navbar-brand.navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand.navbar-brand-centered {
margin-left: -75px;
margin-top: 0;
margin-bottom: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand navbar-brand-centered" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Using this css will get your navigation button in center position.
navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
DEMO
I wrote a custom bootstrap header as shown in the screen shot:
I want that navbar to be moved to right so that it can suit the requirements like this.
I used external CDNs for bootstrap and jquery.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 136px;
}
.navbar-collapse {
margin-top: 1%;
}
.navbar{
background-image: none;
}
#media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
#myNavbar {
background-color:#0067ac;
color:#16ac07;
border-radius:0;
}
Fiddler:
https://jsfiddle.net/z4b2bwg6/9/
How can I do it?
Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>