CODEWITHSUNDEEP
twitter-bootstrap
Gaurav
Gaurav

Reputation: 57

Logo oversizes the Navbar in mobile view | Bootstrap

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

Upvotes: 1

Views: 82

Answers (2)

chetan
chetan

Reputation: 249

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?

Upvotes: 3

RiaanV
RiaanV

Reputation: 258

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

Upvotes: 1

Related Questions