1

Searched the topics on the same issue but couldn't get the solution.

It is the logo which is an issue, it oversizes the navbar in the mobile viewcheck image, test logo

Here is the code

    <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

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

            <a class="navbar-brand" href="index.html"><img src="img/logo.png" id="logo"></a>

        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-right" id="navSocial">

               <li><a href="https://www.facebook.com/" target="_blank"><img src="images/sm-icons/F.png" style="height:50px; width:50px;"></a></li>
               <li><a href="https://www.twitter.com/" target="_blank"><img src="images/sm-icons/T.png" style="height:50px; width:50px;"></a></li>
               <li><a href="https://www.instagram.com/" target="_blank"><img src="images/sm-icons/I.png" style="height:50px; width:50px;"></a></li>

            </ul>

           <ul class="nav navbar-nav navbar-right" id="navMenu">

               <li><a href="#home">Home</a></li>
               <li><a href="#story">The Story</a></li>
               <li><a href="#services">Services</a></li>
               <li><a href="#portfolio">Portfolio</a></li>
               <li><a href="#contact">Contact Us</a></li>

            </ul>

        </div>

    </div>

    </nav>

Here is the CSS

    #logo{
        height:64px;
        width:156px;
    }

    #navMenu{

        margin-top: 25px;
        font-family: "MV Boli";
        font-size: 20px;
    }



    #navSocial{
         margin-top: 8px;
    }

    #navMenu li a:hover{
         font-family: "MV Boli";
        font-weight: bold;
        background-color: #FFDD00;

    }

Please help people

Gaurav
  • 57
  • 1
  • 8

2 Answers2

3

For setting your logo in mobile view you have to use media-query

@media screen and (max-width:320px){
#logo{
    height:24px;
    width:48px;
}}


@media (min-width:321px) and (max-width: 770px){
#logo{
    height:48px;
    width:96px;
}}

for understanding more details please visit this link: Twitter Bootstrap 3: how to use media queries?

Community
  • 1
  • 1
chetan
  • 249
  • 3
  • 6
  • Thanks chetan for ur feedback, your solution has been really helpful for me.. thanks again!! – Gaurav Jan 19 '16 at 15:03
1

Try your css for the logo like so:

#logo {
height: 50px; //Or the desired height till it fits
position: absolute;
top: 0; //Here you can adjust how far from the top you need it
}

Then just add the class of img-responsive to the html and adjust the margin to suite your needs

RiaanV
  • 260
  • 2
  • 14