Max height of navbar in bootstrap

Question

I am trying to narrow the height of my navbar so that it does not expand (in height) for certain screen sizes or when extra text is added to the navbar.

This is my html:

    <div class="navbar navbar-inverse navbar-fixed-top" id="navbar-site">
    <div class="container">
        <div class="navbar-header">
            <button type="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>
            @Html.ActionLink("Website Name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse navbar-options">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
                <li>@Html.ActionLink("Link", "Link", "Link")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

My CSS:

#navbar-site {
    height: 15px;
}

I have tried adding a height and max height css to my navbar but still no luck.

Update: here is a running version of my problem on bootply. Note what happens when the window is made smaller, the height is expanded and the links nestle beneath.

It would be a lot easier to help you if you added the CSS and a working code example! — scarsam, Apr 17 '17 at 21:36
@gbear96 how do you reckon? You really should provide a [**Minimal, Complete and Verifiable Example**](http://stackoverflow.com/help/mcve). — hungerstar, Apr 17 '17 at 21:45
place your html after being generated by those ActionLinks in your question so that someone can troubleshoot the layout easily, — repzero, Apr 17 '17 at 21:50
ill prepare the question better now in just a second, im new — , Apr 17 '17 at 21:52

score 0 · Answer 1 · answered Apr 17 '17 at 21:57

0

You need to do 2 things to get a Bootstrap 3 navbar to be less than 50px high.

Set the .navbar height and min-height to your desired height.
Remove any unwanted padding/margins from the elements inside the navbar.

Here's an example with a simplified version of your HTML: https://jsfiddle.net/caleyshemc/ns0674mp/

Note that you will also have to make whatever's inside your LoginPartial smaller as well.

answered Apr 17 '17 at 21:57

polyp

78
1
9

Will this solve the same issue I have found in this example here: https://getbootstrap.com/examples/navbar/ – Apr 17 '17 at 22:00
When the page is minimized before the toggle appears, the links go below and expand the height of the navbar – Apr 17 '17 at 22:00
1

@gbear96 That happens because there is too much on the navbar to fit the page width. It can be fixed by putting fewer links inside the navbar, or changing the collapse breakpoint (see http://stackoverflow.com/questions/20817956/change-collapse-breakpoint-in-bootstrap-3-0). – polyp Apr 17 '17 at 22:04

Max height of navbar in bootstrap

1 Answers1