CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Soheil Pourbafrani
Soheil Pourbafrani

Reputation: 3427

Bootstrap- Navbar toggle are not showing

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"><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Tel</a></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

Upvotes: 4

Views: 10407

Answers (2)

user13595542
user13595542

Reputation: 1

I had a same problem, fixed it by setting navbar-dark in <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">

Upvotes: 0

Soheil Pourbafrani
Soheil Pourbafrani

Reputation: 3427

As @JackRyder said, navbar-default is missing class on nav Element, adding that shows up button and toggling as well. JSFiddle

Upvotes: 4

Related Questions