bootstrap3 collapsed navbar issue with navbar-header that overflows

Question

I have the following js fiddle. The issue is when the navigation bar is collapsed the layout is pretty messed up (to reproduce just shrink the window size to the size of an iPhone). I believe this is because of the navbar-header that I've put on the following stays constantly on the left and there's no spacing for the collapsed navbar:

 <a class="navbar-brand nav-title-logo" href="http://dev.shopious.com/">  </a>

       </div>

Any workarounds for this?

Sorry. I dont understand what is going on. When collapsed is looks fine! http://screencloud.net/v/wSsu — nahtnam, Dec 01 '13 at 04:47
Ok, here is what I see http://screencloud.net/v/rkaS What is the issue? — nahtnam, Dec 01 '13 at 17:40
You're using desktop styles on the logo. Design your logo in min-width media queries for desktop and put, outside those media queries, the style for the logo on mobile. — Christina, Dec 01 '13 at 18:48
@adit i checked out the jsfiddle on my iphone and here are some screenshots of how it looks. This is when I first visit the page http://imgur.com/LOwRcf3 . This is as I zoom in. http://imgur.com/RZaMnlM — nahtnam, Dec 02 '13 at 03:26

score 1 · Answer 1 · edited May 23 '17 at 12:12

see also: Bootstrap 3 Navbar with Logo

you will have to set the height of your navbar / navbar header according the height of your brand logo:

@media (max-width:767px) 
{
    .navbar, .navbar-header{height: 83px;}
}

Note setting the height to 100% won't work here cause you also use:

.navbar-default {
    height: 44px;
    background-color: #e06b55;
}

Setting the height to 44px seems to break your layout.

You also don't need:

.nav-collapse > .nav:first-child {
    left: 135px;
}

In your fiddle you use: navbar-collapse in where i expect collapse navbar-collapse

bootstrap3 collapsed navbar issue with navbar-header that overflows

1 Answers1