[Resolved] Customize Sticky Navigation (colors)

Home Forums Support Customize Sticky Navigation (colors)

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #945870
    Dimitar

    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

    #946189
    David
    Staff
    Customer Support

    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.

    #946737
    Dimitar

    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)

    #946821
    Dimitar

    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
    }
    #947093
    Leo
    Staff
    Customer Support
    #947764
    Dimitar

    Thanks!

    #948089
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.