Archived topic

Customize Sticky Navigation (colors)

6 replies · Started by Dimitar on July 1, 2019

Viewing posts 1–7 of 7

July 1, 2019 at 4:07 am #945870

Hi There,

I would like to customize the colors of the sticky navigation.
Currently, my header is gradient (custom CSS) so the navigation background is transparent. But when you scroll I would like to have background color on the navigation and to have a different color of the navigation text compared to the colors when the navigation is not sticky.

Is this possible?

I came across this thread: https://generatepress.com/forums/topic/sticky-navigation-header-color/
But I cannot find Use navigation as header in the Layout -> Header menu. I am using Generate Press premium latest version

July 1, 2019 at 8:16 am #946189

Hi there,

you don't have to use the Navigation as Header to use the Merged site header option. So with your current settings you can apply the merged header setting.
Set the Offset Site Header Height to the height of your site header which is 108px. Then set the navigation colors you want when the header is static.

Then for the sticky navigation change the colors in Customizer > Layout > Primary navigation and they will apply.

July 2, 2019 at 1:19 am #946737

Thanks David!

I've tested and it seems what Leo suggested in the other thread is not so closely related to my goal.

I would like to add a background only on the sticky navigation. (When the navigation is in the header the background should be transparent)
I would like to change the navigation text colors only on the sticky navigation. (When the navigation is in the header the colors should be different)

July 2, 2019 at 4:06 am #946821

Okay being totally new to CSS after trial and error I managed to achieve the desired effect.

Could you be so kind to take a look at my piece of code and give any suggestions or improvements:

.sf-menu {
	background-color: rgba(255,255,255,.95);
}

.navigation-stick .inside-navigation .main-nav .sf-menu .menu-item a {
		color: #3387A3 !important
}

July 2, 2019 at 8:13 am #947093

Looks good to me :)

July 3, 2019 at 4:31 am #947764

Thanks!

July 3, 2019 at 8:43 am #948089

No problem :)

This archived topic is closed to new replies.

Start building better websites today.