Snippets

Snippet: Full-Height Header One Menu

  • Updated:
Important: There is now a built-in option in the Customizer for this! Simply go to Appearance > Customize > Header > Menu and enable the "Full-Height" option.

The following CSS can be used to give your header style one a full height so that your menu items are the same height as the header itself.

.navbar-style-one {
    height: 100%;
    margin-top: 0;
    top: 0;
}
.navbar-style-one #site-navigation,
.navbar-style-one .dropdown-menu,
.navbar-style-one .dropdown-menu > li,
.navbar-style-one .dropdown-menu > li.menu-item > a {
    height: 100%;
}
.navbar-style-one .dropdown-menu > li {
    display: table;
}
.navbar-style-one .dropdown-menu > li.menu-item > a {
    display: table-cell;
    vertical-align: middle;
}
Learn how to add custom CSS to your site.
Back To Top