I am creating a website using the latest version of bootstrap, I have a menu that when viewed on a mobile device changes to a toggle menu with the 3 little lines the same as a burger menu. I would like to be able to change the color of the lines as my header is white and so are the lines and they cannot be seen. I have google this but have no joy with changing the color.
Code:
.navbar-header, #myNavbar, .container-fluid {
background: #fff;
}
.nav.navbar-nav li a{
color: #66728d;
font-size: 18px;
background: transparent;
}
.navbar-brand img {
width:176px !important;
height:110px !important;
}
.nav.navbar-nav li a:hover {
background: #8d8166;
}
.navbar-header, #myNavbar, .container-fluid img {
padding-top: 0;
padding-bottom:5px;
}
.nav.navbar-nav li a {
color: #66728d;
background: transparent;
}
.navbar-toggle {
color: green;
}
<nav class="navbar navbar-inverse navbar-light bg-faded">
<div class="container-fluid">
<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" href="#home">
<img src="images/logo.JPG" alt="Los Angeles">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Specials</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
You can control the color of the 3 bars in the hamburger toggle button using this CSS:
.navbar .navbar-toggle .icon-bar {
background-color: #000;
}
Related
On my web page, I cannot get the navbar dropdown to appear in front of the background image on my iphone 8+. It works on my Samsung J5. I've tried Z-index.
Can anyone help?
#mynavbar {
position: relative;
}
.navbar {
border: none;
background-color: white;
height: 10px;
}
.navbar-collapse, .navbar-toggle {
margin-top: 2.5vh;
}
.nav {
z-index: 999 !important;
background-color: lightgrey;
}
.home_opt {
z-index: 999 !important;
background-color: grey;
}
.contact_opt {
z-index: 999 !important;
background-color: grey;
}
<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">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/webThemesLogoBlack-smallest.jpg" alt="sydney"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right menu">
<li class="active home_opt">Home</li>
<li class="contact_opt">Contact Us</li>
</ul>
</div>
</div>
</nav>
Try putting the z-index on #mynavbar instead of .nav
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 am going to change color and another css in my bootstrap navbar-inverse. Default color is black, and I want to change it in dark blue.
My code, I guess, is correct, but unfortunately, nothing had changed.
.navbar {
font-size: 16px;
font-weight: 100;
}
li {
margin: 5px 0px 5px 0px;
font-size: 14px;
font-weight: 300;
}
.menu {
padding: 0px;
}
.navbar {
border-radius: 0px;
margin-bottom: 0px;
}
.navbar-inverse {
background-color: #1b365b;
border: none;
}
.navbar-brand {
padding: 5px 15px;
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
background-color: #254a7c;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar-001 navbar navbar-inverse">
<div class="container menu-001">
<div class="row">
<div class="col-xs-12">
<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" href="#"><img src="img/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">О компании</li>
<li>Прайс</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Услуги <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Грузоперевозки</li>
<li>Аренда автотранспорта</li>
<li>Аренда спецтехники</li>
<li>Ремонт автотранспорта</li>
<li>Грузовой шиномонтаж</li>
<li>Вывоз мусора</li>
<li>Продажа топлива</li>
<li>Аренда земли</li>
<li>Страхование грузов</li>
</ul>
</li>
<li>Документы</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
The bootstrap html code works correctly, but navbar css code doesn't work at all. But! css code that isn't related to navbar-inverse works perfectly.
Where is my mistake? What did I wrong?
.navbar-inverse {
background-color:#9933ff !important;
border:none;
}
you can write another css class for the navbar-inverse and write the background-color and put "!important" as it will overwrite the default navbar-inverse in bootstrap
try this code
bootstrap class conflict with your code
.navbar-001.navbar.navbar-inverse {
background-color:#1b365b;
border:none;
}
or
.navbar-001.navbar.navbar-inverse {
background-color:#1b365b!important;
border:none!important;
}
I'm currently working on a theme and there I got this weird sort of problem which I'm here sharing for solution, I want to change the bootstrap navbar color from default to #0288D1 but even though I have mentioned this hex-code in background-color property of navbar class I haven't got the desired result.
Here is the HTML Code
<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="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</div>
</div>
CSS
.navbar {
margin-bottom: 0;
background-color: #0288D1;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #0288D1 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
You can replace it with w/e color you want.It works fine to me , I dont experience any problems? Even with hex-code color;
.navbar{
background-color: red;
}
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>