CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Developer Desk
Developer Desk

Reputation: 2344

How to align navbar so that it does not overlap logo..?

I have problem while aligning navbar. When I resize window my navbar overlaps logo...

Here is Fiddle

code :

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background: rgba(0,0,0,0.6)">
        <div class="container-fluid" style="">
            <div class="navbar-header" style="height:70px;">
                <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex1-collapse" style="z-index: 100">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <img src="http://placehold.it/471x71&text=MY+LOGO+GOES+HERE" style="position:fixed;"/>
                </a>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 3 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Services 1</a></li>
                            <li><a href="#">Services 2</a></li>
                            <li><a href="#">Services 3</a></li>
                            <li><a href="#">Services 4</a></li>                                
                        </ul>
                    </li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                    <li><a href="#">Page 6</a></li>                      
                    <li><a href="#">Page 7</a></li>
                    <li><button type="button" class="btn btn-lg navbar-btn btn-secondary" style="margin:10px;margin-top: 0;border-radius: 0;">Sign in</button></li>                      
                    <li><button type="button" class="btn btn-lg navbar-btn btn-secondary" style="margin:10px;margin-top: 0;border-radius: 0;">Register</button></li>
                </ul>        
            </div>
        </div>
    </nav>

Upvotes: 0

Views: 1323

Answers (2)

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

You can do it my giving the width to navbar-brand class and apply image with as 100%

css

 @media(max-width:768px){

     .navbar-brand{
         width:70% /*change the width as per your requirement*/
    }

    .navbar-brand img{
         width:100%; /* adjust the width as per your logo size*/
        position:relative!important;
    }

here is the JSFIDDLE LINK

Upvotes: 3

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Maybe you can make it like this Working fiddle http://jsfiddle.net/4bvsbkr2/1/

@media (max-width: 1360px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

But i dont like this, because, its collapse very soon, maybe you can for each resolution different styling of elements like

<div class="visible-sm"></div>
<div class="visible-xs visible-sm"></div>

Upvotes: 1

Related Questions