0

I'm using BS3 and a bunch of custom styling. I know the line of code that's causing the issue, but I can't think of a way to make the navbar not so tall without the height or max-height attribute. Click on the JSFiddle and you'll see that there is no color background when you look at the menu when collapsed (mobile). Simply remove the max-height line and it works, but the navbar is too tall for what I want.

There's a ton of HTML & CSS, so beware the following paste. Note that I'm linking to a custom bootstrap.css as well...

<div class="navbar-wrapper">
    <div class="container-fluid">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
                    </button> <a class="navbar-brand" href="#"><img id="logo" src="http://www.thinkliz.com/dev/midtownaustin/img/midtown-church-austin-logo-white-vector.svg" class="img-responsive"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>
    </div>
</div>

CSS:

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
 .navbar-wrapper {
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    z-index: 20;
}
.logo {
    margin-top: -42px;
}
.navbar-brand img {
    height: 290px;
    max-height: 130px;
    margin-top: -55px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
 @media (max-width: 768px) {
    .navbar-brand img {
        max-height: 70px;
        margin-top: -60px;
    }
    /* THIS IS WHAT IS BREAKING THE NAV */
    .navbar {
        min-height: 80px;
        max-height: 80px;
    }
    .navbar-toggle {
        margin-top: 23px;
    }
}
internetjason
  • 81
  • 1
  • 9

2 Answers2

0

So are you trying to get the background of the mobile collapsed menu a different color so you can read the text? You could add a custom CSS rule such as:

.navbar-collapse ul {
    background-color: #ff0000;
}

I doubt you want red at the background, but it's just an example.

TheJarvis
  • 26
  • 4
  • That could work, but I still don't understand why removing the height line fixes it. Another issue is that the huge margin between the navbar and the collapsed ul's. If I give it a negative top margin, the text disappears behind...something. – internetjason Jul 31 '15 at 23:45
0

Most often it breaks the layout if you use position absolute without knowing what you really do. Especially when you work with a CSS framework. You have to fix too much and there seems to be no end.

Customize as much as possible with bootstrap and as less as possible by your own. Only that which you can't do with bootstrap.

To make the navbar work with a bigger (custom) logo follow this instruction:

Instruction bootstrap navbar with bigger logo

with your logo and the size of it. After you have done this, set the background colors for the

.navbar-header and .navbar-collapse. You have a perfect working navbar!

Community
  • 1
  • 1