Skip to content

Instantly share code, notes, and snippets.

@kosinix

kosinix/header.php

Last active Apr 10, 2021
Embed
What would you like to do?
WordPress basic CSS for styling nav menus with wp_page_menu taken into account. Supports sub-menus as dropdowns.
<?php
// Somewhere in your header.php add this. container_class and menu_class should match the CSS main class.
wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'nav-menu', 'menu_class' => 'nav-menu' ) );
div.nav-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
div.nav-menu li {
position: relative;
line-height: 1.7;
}
div.nav-menu a {
color: #fff;
text-decoration: none;
display: block;
}
div.nav-menu > ul > li {
float: left;
}
div.nav-menu > ul > li > a{
padding: 10px 10px;
}
div.nav-menu > ul > li:hover > a{
background: #333;
}
/* Sub/Children Menu */
div.nav-menu .sub-menu,
div.nav-menu .children {
position: absolute;
left: 0;
top: 100%;
z-index: 1;
background: #333;
min-width: 200px;
display: none;
}
div.nav-menu li:hover > .sub-menu,
div.nav-menu li:hover > .children {
display: block;
}
div.nav-menu .sub-menu a,
div.nav-menu .children a {
padding: 5px 10px;
}
div.nav-menu .sub-menu li:hover a,
div.nav-menu .children li:hover a {
background: #444;
}
/* Grandchildren Menu */
div.nav-menu .sub-menu .sub-menu,
div.nav-menu .children .children {
position: absolute;
left: 100%;
top: 0;
background: #444;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment