How do I modify navbar height?

HTML & CSS
, ,
1

I’ve tried adjusting the height everywhere I could and nothing is working. Looking online I found a site that said I needed to set it in multiple different places, but when I did that I still got nothing. Any ideas? Also, I need to resize my logo, but I’m not sure of the best way to do it?

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <link type="text/css" href="/css/LayoutStyleSheet.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomePage - My ASP.NET Application</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />

</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <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"><img src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
        </div>
        <ul id="navposition" class="nav navbar-nav">
        <li class="individualbtnposition"><a href="/">Home</a></li>
        <li class="dropdown individualbtnposition">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="/OurCompany">Our History</a></li>
                <li><a href="/OurCompany/Facilities">Facilities</a></li>
            </ul>
        </li>
        <li class="dropdown individualbtnposition">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
                <ul class="dropdown-menu">
                    <li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
                    <li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
                    <li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
                    <li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
                    <li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
                </ul>
            </li>
            <li><a href="#">Pay Stubs</a></li>
            <li><a href="/FormsHandlers/FAQ">FAQ</a></li>
            </ul>
         </li>
         <li class="dropdown individualbtnposition">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
             <ul class="dropdown-menu">
                 <li><a href="#">ISS Support</a></li>
                 <li><a href="#">Purchase Requests</a></li>
                 <li><a href="#">Maint. Support</a></li>
             </ul>
          </li>
        </ul>
    </div>
</nav>

CSS:

#layoutBody {
    background: #353c3e;
    color: white;
    font-family: 'Oswald', sans-serif;
}
.navbar{
    
}
.navbar-header {
    width: 20%;
    background-color: hotpink
}

.navbar-brand {
    width: 100%;
    height: auto;
}

#navposition {
    background-color: aqua;
    margin-left: 10%;
    width: 50%;
}
.individualbtnposition {
    margin-right: 8%;
    font-size: large;
}

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #555;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
2

You only need to set it in one place in an external CSS after you call the bootstrap CSS

Just add this to your custom.css file

.navbar{
height: 200px; /* Just an example height*/
}

3

Oh I see, I think the problem was I was trying to use percentages, not pixels. Why do I have to use pixels? I’m still pretty new to html and css, but it seems like using pixels is mostly discouraged because it’s not as flexible?

4

Actually, in the majority of cases, setting the height is also discouraged because it’s not as flexible. You would probably be better to not set a height, but maybe add top and bottom padding to the navbar items.

1 Like
5

I have not had a good look at the nav bar, but I’m less concerned about the units, but more about setting an explicit height. Fixing heights should generally be avoided as it is very inflexible. Height should be determined by content, not some arbitrary number. If you need to increase the height in some way, like to make more space that can be done by other means such as adding vertical padding where it is wanted. This way the height is still flexible and defined by content, but is supplemented by padding.
In cases where you feel you really must use an actual height it’s better to use min-height to stay responsive, just like using max-width instead of width.

6

Ok, so in that case, let me redefine my question: My image is too large, I need it to be smaller to fit inside the nav bar. How should I handle that?

7

Is this not just a continuation of your other thread, @ethanforbes89? Perhaps it would be more useful to continue this there?

1 Like
8

Nobody had responded for several hours. I thought maybe it would be better to start one with a more specific need.

9

It would be more appropriate to add information to the original thread than to start a new thread about the same topic. The latter is frowned upon.

https://www.sitepoint.com/community/faq

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.