When it comes to creating a visually appealing and user-friendly website, the design and functionality of the navigation menu play a vital role.
One popular WordPress theme that offers extensive customization options for menus is GeneratePress. With GeneratePress, you can effortlessly style your primary and secondary menus using custom CSS, allowing you to tailor them to your website’s unique branding and design requirements.
In this post, we will delve into the world of GeneratePress and explore how you can harness the power of CSS to transform your menus into eye-catching navigational elements. Whether you want to make subtle tweaks or completely revamp your menus, GeneratePress empowers you to create menus that seamlessly blend with your website’s overall aesthetic.
Table of Contents
- 1 GeneratePress: CSS Code to Center the Primary Menu
- 2 GeneratePress: Padding for Primary Menu
- 3 GeneratePress: Padding for Submenu Items
- 4 GeneratePress: CSS Code for the Mega Menu
- 5 GeneratePress: Make Toggle Transparent
- 6 GeneratePress: Add Border to the Top of Sub-Menu
- 7 GeneratePress: Underline on Hover for Primary Menu
- 8 GeneratePress: Border at the Bottom of Submenus
- 9 GeneratePress: Menu and Mega Menu
GeneratePress: CSS Code to Center the Primary Menu
If you want the primary menu to be in the center, try this CSS code
@media(min-width:1024px) {
nav#site-navigation {
width: 100%;
}
div#primary-menu {
margin-left: auto;
margin-right: auto;
}
}
GeneratePress: Padding for Primary Menu
If you need to add some padding to the primary menu, this is the CSS snippet you need
.main-navigation ul {
padding-top: 15px;
}
If you need to add a little bit of padding at the top and the bottom of the submenus, you can use this CSS code
.main-navigation ul ul {
padding-top: 20px;
padding-bottom: 20px;
}
GeneratePress: CSS Code for the Mega Menu
This is the minified CSS code that I am using for the GeneatePress mega menu, I made adjustments to the padding
@media (min-width: 1099px) {
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
padding: 20px 0 20px 5px;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: normal;
font-size: 16px;
}
nav .main-nav .mega-menu > ul > li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2 > ul > li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3 > ul > li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5 > ul > li {
width: 20%;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}
nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
GeneratePress: Make Toggle Transparent
This is the CSS that you need to make the CCS Transparent
.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {background-color: transparent;}
You can unminify the code here in case you wanna have a close look at the code and what it does
GeneratePress: Add Border to the Top of Sub-Menu
This CSS will add a border on top of your sub-menu.
.menu ul.sub-menu {
border-top: 4px solid #4c9777;
}
GeneratePress: Underline on Hover for Primary Menu
If you want to show bold underline on hover at the primary navigation menu.
@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 12px;
left: 12px;
bottom: 0;
display: block;
height: 5px;
background-color: #d5db12;
opacity: 0;
transition: opacity 0.2s;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
opacity: 1;
}
}
This is another CSS snippet that will make your site show bold underline on hover at the primary navigation menu.
div#primary-menu > ul > li:hover:after, div#primary-menu > ul > li.current-menu-item:after {
content:"";
position: absolute;
bottom: 5px;
width: 60%;
transform:translateX(30%);
height: 3px;
background-color: #E6836C;
}
div#primary-menu > ul > li a{
position:relative;
}
If you want to add a border at the bottom of the submenus, you need this bit of CSS
.main-navigation .menu ul.sub-menu li:not(:last-child) {
border-bottom: 1px solid #EEEEEE;
}
If you play with the sub-menu background and sub-menu text options.

You will make your submenu do this every time you mouse over them.
If you want to understand what I mean, check this 15-second video.
GeneratePress: Menu and Mega Menu
If you are using the regular menu and submenus and also the mega menu and you want a border at the bottom of each submenu, you need this code
nav .main-nav .mega-menu > ul > li {
padding-left: 20px;
padding-right: 20px;
}
.main-navigation .menu li:not(.mega-menu) ul.sub-menu li:not(:last-child) {
border-bottom: 1px solid #EEEEEE;
}
.main-navigation .menu li:is(.mega-menu) ul.sub-menu li > a{
position:relative;
}
.main-navigation .menu li:is(.mega-menu) ul.sub-menu li > a::after {
content: "";
width:100%;
height: 1px;
background-color: #EEEEEE;
position:absolute;
left: 50%;
bottom:0;
transform:translateX(-50%);
}