Snippet: Full-Height Header One Menu
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.