I use Navbar-toggle for showing group menus on mobile devices but it's not working! What is the problem? The Following is my code and JsFiddle.
Actually When I give class navbar-toggle the button disapear!
HTML:
<nav class="navbar" role="navigation">
<div class="navbar-header">
<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>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-right navbar-nav navbar-collapse collapsed" id="menu">
<li class="active" id="home">Home</li>
<li>Services</li>
<li>About</li>
<li>Tel</li>
</ul>
<img id="logo" src="images/logo.png" class="img-responsive">
</nav>
CSS:
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f7f7f7;
box-shadow: 0 4px 2px -2px #dedede;
}
.navbar-nav > li:first-child > a{
background-color: #01a89e;
color: white;
}
.navbar-nav > li:first-child a:hover, .navbar-nav > li:first-child a:active {
background-color: #01a89e;
}
.navbar-nav li a:hover{
background-color: #dedede;
}
.navbar-nav{
margin-top: -1px;
}
.navbar-nav li:not(:first-child){
border-left: 1px solid #dedede;
margin-bottom: -3px;
}
.navbar-nav li:hover{
/*border: none;*/
}
.navbar-nav li a{
color: #606060;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: -3px;
}
#logo{
width: 120px;
}
JsFiddle
As #JackRyder said, navbar-default is missing class on nav Element, adding that shows up button and toggling as well. JSFiddle
I had a same problem, fixed it by setting navbar-dark in <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
Related
I'm trying to position the hamburger menu on the right when I click on it, but I'm not managing to adjust the CSS for that.
I have this HTML code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<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">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="navbar-header">
<p class="navbar-text navbar-right">
Username
</p>
</div>
</div>
</nav>
Ad this CSS:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
How to adjust this CSS so that the hamburger menu is on the right when clicking on it? The padding of the boxes must be appropriate to the size of the words inside it. Like this:
It's okay if it overwrites the space under it.
I need a solution that uses this CSS code, only. See more here.
Thanks.
Change collapse.in selector to
.collapse.in{
display:block !important;
position:absolute;
float:right;
right: 0;
}
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;
}
The fixed navbar was working but suddenly it stopped on Firefox. When I tried on other browsers (chrome, ie, opera) it works right now but not on FF. I tried to start FF in safe mode but no difference. What is wrong?
.nav-tabs li a {
color: #777;
}
.navbar {
margin-bottom: 0;
background-color: #153870;
border: 0;
font-size: 15px !important;
letter-spacing: 4px;
opacity:0.9;
}
.navbar li a, .navbar .navbar-brand {
color: #ffef03 !important;
}
.navbar-nav li a:hover {
color: #3AA83D !important;
}
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.open .dropdown-toggle {
color: #ffef03 ;
background-color: #153870 !important;
}
.dropdown-menu li a {
color: #ffef03 !important;
}
.dropdown-menu li a:hover {
background-color: #153870 !important;
}
<nav id="myNB" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavb">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Obrakadabra!..</a>
</div>
<div class="collapse navbar-collapse" id="myNavb">
<ul class="nav navbar-nav navbar-right">
<li>Askerleri</li>
<li>Koç Hakkında</li>
<li>Ne dediler?</li>
<li>O ne dedi?</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dahası
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Mekanı</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
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;
}
When viewed on mobile devices, the collapsed navbar will be unfolded when clicked on it. But it will not close when I click it again.
Here is the HTML code:
<nav id="main-nav" class="main-nav navbar-right" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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>
<!--//nav-toggle-->
</div>
<!--//navbar-header-->
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="scrollto" href="index.html">Home</a></li>
<li class="nav-item"><a class="scrollto" href="project.html">Project</a></li>
<li class="nav-item"><a class="scrollto" href="download.html">Download</a></li>
<li class="nav-item last"><a class="scrollto" href="contact.html">Contact</a></li>
</ul>
<!--//nav-->
</div>
<!--//navabr-collapse-->
</nav>
And the CSS:
.header .main-nav .navbar-collapse {
padding: 0;
}
.header .main-nav .nav .nav-item {
font-weight: normal;
margin-right: 46px;
}
.header .main-nav .nav .nav-item.active a {
color: #dbdada;
background: none;
}
.header .main-nav .nav .nav-item a {
color: #fff;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
font-size: 16px;
padding: 15px 10px;
}
.header .main-nav .nav .nav-item a:hover {
color: #fff;
background: none;
}
.header .main-nav .nav .nav-item a:focus {
outline: none;
background: none;
}
.header .main-nav .nav .nav-item a:active {
outline: none;
background: none;
}
.header .main-nav .nav .nav-item.active {
color: #dbdada;
}
.header .main-nav .nav .nav-item.last {
margin-right: 0;
}
I included jquery.min.js and bootstrap.min.js, I really don't know what the problem is.
Just checked the source of vubao.co and found the issue. You have included jquery file twice on line no 168 & 173 (check it on page source). Remove one of the file and it will work fine.
Change the first line
<nav id="main-nav" class="main-nav navbar-right" role="navigation">
instead of this
<nav class="navbar navbar-default navbar-custom">