I want to create a navbar over an tranparent background but when I create navbar it also gets the properties of background image. Can anyone please help me solve this problem?
This is the HTML for the Menu:
<section>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<img src="logo.png" style="padding-left: 50px; margin-top: 5%">
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active"> HOME</li>
<li> SERVICES</li>
<li> ABOUT</li>
<li> TESTIMONIALS</li>
<li> CONTACT</li>
</ul>
</div>
</nav>
</section>
And here is the CSS:
.navbar {
background:transparent;
background-image:none;
border-color:transparent;
box-shadow:none;
}
.active {
background-color: white;
}
{
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.container-fluid {
position: relative;
padding-left: 0px;
}
.container-fluid img {
vertical-align: middle;
}
.container-fluid .content {
position: absolute;
bottom: 0;
background: rgba(0,178,170,0.5); /* Black background with transparency */
color: #f1f1f1;
width: 100%;
padding: 20px;
height: 500px;
}
Please use navbar-light or navbar-dark so the link colors work against the contrast of the background image or color
somewhat like this:
<nav class="navbar navbar-light transparent">
or
<nav class="navbar navbar-dark transparent">
The best way to use background-image with background overlay.
.image {
background-color: #490d40;
background: url(https://sonorangirl.github.io/Earth-Quotes/img/google-earth-view-South-Iceland3.jpg)
no-repeat center center;
background-size: cover;
height: 200px;
position: relative;
}
.image:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(51, 23, 14, 0.6);
}
.navbar {
height: 80px;
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
margin-top: 10px;
color: white;
}
.navbar-default .navbar-nav > li > a {
color: white;
padding: 10px 20px;
margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #000;
color: #fff;
}
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Link</li>
<li>Another Link</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="image"></div>
</body>
demo
I've added a class header to the section element which contains the nav-bar and added this style:
.header { position: relative; z-index: 2; }
The header will position itself on top of the background.
Example: https://jsfiddle.net/y817zo62/
Related
Hey guys i have been trying to add my company logo to the bootstrap nav bar, and my logo is saved in Images/Logo.jpg in the same Directory as that of my index.html, But i just cant seem to add a logo to my nav bar, all i can see is my text for logo and no image. Please help me here is my code. Thanks
HTML
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav 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="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" class="pull-left" href="#myPage">
<img src="Images/Logo.jpg">The Concetto</span>
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SERVICES</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS
.container1 {
display: flex;
justify-content: center;
}
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
I'm trying to place the picture of mine which is <div class="shape"> on top of the background image which is <div class="hero"> just above the center using bootstrap.
However, the background color and image both appear above my picture. I'm looking for the background image to go behind my picture and for the background color not to be seen at this moment in time.
Please don't delete the background color if you decide to help me as I want to do something with it at a later stage.
Please open the snippet in full screen to see my issue.
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color:#c00;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: ~50px;
}
.hero {
background: url("http://mowebusa.nobletechindia.com/wp-content/uploads/2016/05/computer.jpg") center center no-repeat;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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 navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
You can do this by following the steps below:
add position: absolute to .shape to overlap the hero image.
add z-index: 10 to get .shape on top of .hero image
Now, to center align a positioned element, keep in mind the following trick:
use left: 50% to put the positioned element 50% from the left.
add margin-left: -150px
The 1st step would have worked just fine if the element had width of 1px (.shape will start after 50% from left) but since it has a width of 300px, you will have to add a negative margin-left equal to half the width of the element (300/2 = 150).
Similarly, for vertical alignment you can use top: 50% and a negative margin-top equal to 1/2 of the height.
Note: There was issue on padding-top: ~50px;, remove the ~ as it is invalid token. Also, padding can't be in negative.
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color: #c00;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: 50px;
}
.hero {
background: url("http://mowebusa.nobletechindia.com/wp-content/uploads/2016/05/computer.jpg") center center no-repeat;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
/* add this */
position: absolute;
left: 50%;
margin-left: -150px;
z-index: 10;
}
!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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 navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
How can I make a bootstrap navbar like that: Navbar
The image should be centered on the navbar.
Here is what I have currently:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">
<img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg">
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li class="active">
Home
</li>
<li>
Pricing
</li>
<li>
FAQ
</li>
</ul>
</div>
This is the CSS that accompanies the above code:
.navbar-inner{
position:relative;
padding-left:70px;
}
.navbar .brand {
margin-left: 0px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
position: absolute;
width: 50px;
background: #f00;
left: 0px;
top: 0px;
padding: 10px;
}
That's my new code: http://www.bootply.com/gEoN0zJ3e8
How can I make the image centered?
Here's one way you can do this by using position:absolute to place your image. Depending on what you plan on doing for mobile, you'll have to adjust your navbar according (the example assumes the default Bootstrap behavior).
Working Example:
nav.navbar {
margin-top: 50px;
margin-bottom: 65px;
border: 0;
}
nav.navbar .navbar-collapse {
border: 0;
}
nav.navbar .navbar-brand {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: -50px;
transform: translateX(-50%);
padding: 0px;
}
nav.navbar .navbar-brand img {
height: 150px;
width: 150px;
margin-left: -50px;
}
#media only screen and (min-width: 768px) {
nav.navbar {
margin-top: 65px;
margin-bottom: 80px;
min-height: 20px;
height: 20px;
}
nav.navbar .navbar-nav > li > a {
font-size: 12px;
padding: 0px 10px;
}
nav.navbar .navbar-brand {
top: -65px;
}
}
#media only screen and (max-width: 767px) {
nav.navbar .navbar-nav {
margin-top: 50px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x150/b71c1c/fff?text=LOGO">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Pricing
</li>
<li>FAQ
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-info">
Content
</div>
</div>
<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.7/js/bootstrap.min.js"></script>
Here is the code. Adding class to image and adding some css style. You can change position editing .imgc class properties. Enjoy
.menu-container {
background-color:#000000;
height:40px;
}
.navbar-collapse { padding: 1px 30px;}
.navbar-brand {position:absolute;margin-top:-60px;}
.navbar-collapse {
margin-top: 100px;
margin-left: 120px;
color: #fff;
}
.imgc {margin-top:-2px;}
#nav.affix {
position:fixed;
top:0;
width:100%;
z-index:10
}
#sidebar.affix-top {
position:static
}
#sidebar.affix {
position:fixed;
top:80px
}
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="menu-container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"><span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span></a> <a class="navbar-brand" href="#"><img class="imgc" alt="" src="http://placehold.it/150x150&text=Logo"></a>
<div class="navbar-collapse collapse">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
I have a fixed-top navigation bar with content inside that needs to be center aligned vertically. Additionally, I'm using bootstrap to me design my page. The navigation bar has two major content blocks. One is an image as my nav header and one has a container of an with links.
The container I wrapped around the two does not have any vertical padding and only has margins for content going underneath it.
<!--Navigation Bar-->
<nav class="navbar navbar-default navbar-fixed-top navbar-wrap">
<div class="container-fluid">
<div class="navbar-header">
<img src="img/logo.png" />
</div>
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
What I have tried doing is set the .container-fluid>ul to be relative to the container and set the margin to auto. I do not want to have a fixed margin or padding for it since I want the site to scale well even on mobile devices (hence why I'm using bootstrap).
I am a very amateur developer and just trying to get a site off the ground so I can showcase my projects from school and side gigs.
Thanks in advanced, if you would like to see my CSS. I can edit it in too.
http://imgur.com/pXcwav3
.navbar-wrap {
padding: 0;
background-color: #77B69C;
}
.nav {
padding-right: 15px;
}
.navbar-right {
margin-right: 0;
}
.container-fluid>ul {
position: relative;
height: 100%;
margin: auto;
}
.navbar-default .navbar-nav>li>a {
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar-default .navbar-nav>li>a:hover {
color: #171F26;
background-color: #fff;
}
There are multiple ways you can handle this depending on what makes most sense.
1) You could actually use text and adjust it with CSS like in the first
navbar example.
2) You can constrain the image to the navbars default height like in
example 2.
3) And you can adjust the height and line height like in example 3 for an
image that exceeds the height of the navbar.
** Also, if you are using a preprocessor (LESS or SASS) you can easily adjust the height and the rest is handled.
I also inserted the HTML so your navbar collapses (Navbar Docs)under 768px into the mobile configuration (unsure if the omission was meant or not).
(if you do use the 2nd or 3rd option just remove the margin-top class from navbar-wrap* so the nav is fixed to the top again.)
#import url(https://fonts.googleapis.com/css?family=Hind+Vadodara);
/**Text CSS**/
.navbar.navbar-wrap {
background: #77B69C;
}
.navbar a.navbar-brand,
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
font-family: 'Hind Vadodara', sans-serif;
font-size: 30px;
color: #000;
letter-spacing: 5px;
}
.navbar .navbar-brand span.lname {
color: #fff;
}
.navbar.navbar-wrap .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
#media (min-width: 768px) {
.navbar.navbar-wrap .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap .navbar-brand {
margin-left: 15px;
}
}
/**IMG CSS**/
.navbar.navbar-wrap2 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap2 .navbar-brand img {
height: 50px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap2 {
background: #77B69C;
margin-top: 200px;
}
.navbar.navbar-wrap2 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap2 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap2 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap2 .navbar-right {
margin-right: 15px;
}
}
/**LARGE IMG CSS**/
.navbar.navbar-wrap3 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
height: 75px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap3 {
background: #77B69C;
margin-top: 400px;
}
.navbar.navbar-wrap3 .navbar-header {
height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 20px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap3 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap3 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap3 .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 45px;
}
}
<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 navbar-wrap navbar-fixed-top">
<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-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="#"><span class="fname">James</span> <span class="lname">Wong</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap2 navbar-fixed-top">
<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-nav2" 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="#">
<img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav2">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap3 navbar-fixed-top">
<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-nav3" 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="#">
<img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav3">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I am trying to make my navigation bar stay in the same position even after resizing the window. It continues to move on resize and therefore the Navigation Bar and Nav brand are not aligned the way I want:
HTML:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div>
<div class="navbar-header">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Our Prices</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
CSS:
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 20px;
padding-right: 20px;
}
.navbar-nav li:hover {
background-color: #3c3c3c;
}
.navbar-nav {
color:red;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}