Sticky header styling

I hope one day, sticky header styling will be integrated in the Customizer but for the time being there is a CSS solution:

/* Change sticky header background to white */
.main-navigation.navigation-clone {
    background-color: #FFF;
}

You might want to change the color of the text logo, menu nav links, mobile icon and mobile icon text:

.main-navigation.navigation-clone .navigation-branding a,
.main-navigation.navigation-clone .main-nav ul li a,
.main-navigation.navigation-clone button.menu-toggle::before,
.main-navigation.navigation-clone button.menu-toggle span.mobile-menu {
	color: #000 !important;
}

Finally, you might want to reinstate the nav hover and nav currrent link color:

.main-navigation.navigation-clone .main-nav ul li a:hover, 
.main-navigation.navigation-clone .main-nav ul li.current-menu-item a {
	color: #ab2eba !important;
}

GeneratePress logo

Need help on customizing GeneratePress or GenerateBlocks?

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!