CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2676132
user2676132

Reputation: 21

Bootstrap Fixed Header items not coming on Mobile

I am working on creating a website using Bootstrap 3. The header is fixed both on laptop and mobile. But the items in the header are not showing up on mobile. Just a clean fixed header can be seen on the mobile device.

The Code I am using for the header is -

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container myContainer">
    <div class="navbar-header">
        <div class="collapse navbar-collapse mynavbar">
                        <ul class="nav navbar-nav myFont" >
                                <li><a href="#Values">Values</a></li>
                                <li><a href="#community">Community</a></li>
                                 <li class="mylogo"><a href="#" class="navbar-brand"><img src="images/xyz-6.png" alt="" width="160px" height="50px" id="Logo"/></a></li> 
                                 <li><a href="#in">abc</a></li>
                                <li><a href="#aboutus">Who are we</a></li>
                        </ul>
        </div>  
    </div>          
  </div>
</nav>

And the customed CSS used is - 

.mylogo{
        margin-top : -15px;
    }
.navbar-nav>li>a{
        color: #000 !important;
        font-size: 20px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
.navbar-nav>li{
        padding: 5px 20px 5px 40px;
    }

Upvotes: 0

Views: 44

Answers (2)

B_s
B_s

Reputation: 3036

You can remove the collapse to show the whole menu on mobile, but you missed the mobile navbar menu button to have a proper mobile menu. See the Bootstrap documentation for more info and this Bootply link for a demo.

In short, add this code to your .navbar-header div:

<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>

Upvotes: 1

max
max

Reputation: 8667

<div class="collapse navbar-collapse mynavbar">

Remove two classes from this div (collapse and navbar-collapse).

Upvotes: 0

Related Questions