[Resolved] Styling Sticky Header

Home Forums Support Styling Sticky Header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #334709
    Dan

    I would like to know how to change the color and transparency of the Sticky Navigation Header. White is fine for now. Just want to learn how. The site is currently located at http://crushtheresistance.com/

    Thanks!

    GeneratePress 1.3.48
    #334723
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    .main-navigation.navigation-clone {
        background-color: rgba(74,94,155,0.7);
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #334727
    Dan

    That did the trick. Thanks!

    For anyone who comes across this post who may be interested in a white background for the sticky header, I am using this:

    .main-navigation.navigation-clone {
        background-color: rgba(255,255,255,1.0);
    }

    If you want it white with 50% transparency, change that 1.0 into a 0.5.

    Of course, black instead of white would be zeros instead of 255’s.

    #334730
    Leo
    Staff
    Customer Support

    For white you can use background-color: #ffffff; as well 🙂

    #334732
    Dan

    LOL! Of course, you are right. Once I figured out how to do white in RGBA, I then thought about how to remove the transparency, hence I ended up with (255,255,255,1.0). Talking about making things more complicated than they needed to be! 🙂

    #386998
    Luís

    Hello. My main navigation bg is transparent with white menu text. I’m using this code to make my Sticky Navigation white but how can I change the Sticky Nav menu text color to black? Thanks.

    #387012
    Leo
    Staff
    Customer Support

    Try this CSS:

    .main-navigation.navigation-stick .main-nav ul li a {
        color: #000000;
    }
    #387013
    Dan

    And for what it’s worth, the site I was playing with is essentially a testing site right now and is not necessarily relevant to this conversation. 🙂

    #387096
    Luís

    Thanks Leo. As we’re on it (and there’s no native options to edit it in GPP) what css can I use in order to change the sticky menu “hover” and “current” text colors?

    #387113
    Leo
    Staff
    Customer Support

    This should help: https://docs.generatepress.com/article/changing-navigation-colors/

    Just replace the start .main-navigation with .main-navigation.navigation-stick

    #387300
    Luís

    Hi Leo… Tried the css you suggested but even replacing what you say to replace, there’s no code in that page to achieve what I want. Some frustration growing on here… Ok… please look at a short video I made so to better understand what I need.

    I just want the sticky menu to have exactly the same hover text color and current text color as in the fixed menu BUT (because the sticky menu background changes to white) i need the sticky menu text BLACK.
    But as soon as I add the css code to change the sticky menu text color to black, it overwrites all the settings from page header advanced custom navigation colors.

    In the video I’ll show you my GP page header advanced settings and the menu behaviour with those settings. Then I’ll add the CSS code to change the sticky menu text color to black and I’ll show the menu behaviour end result.

    So in short, i just want the sticky menu with same behaviour as the fixed menu but with black color in the text so it is visible in the white background.

    Video –> https://www.useloom.com/share/9fae92897824423a95f1058d0e5d79a4

    I really hope it helps.

    Luis

    #387472
    Leo
    Staff
    Customer Support

    I’m not quite seeing the problem? Looks like it’s doing exactly what you wanted?

    Which part is wrong? Any chance you can duplicate that on a live server so I can see the code easier?

    Sorry if I’m missing something. We will get it figured out 🙂

    #387523
    Luís

    Hi Leo. Let me explain like this. Currently this is how the colors are:

    FIXED MENU(main nav)
    1 – Text color = WHITE
    2 – Current page text color = ORANGE
    3 – Hoover text color = ORANGE

    STICKY MENU(main nav)
    4 – Text color = BLACK
    5 – Current page text color = BLACK —-> I want ORANGE here
    6 – Hoover text color = BLACK —-> I want ORANGE here

    So, in 5 and 6 I need css to turn it to ORANGE.

    I’m setting a live server. where can I send you login access?

    #387588
    Leo
    Staff
    Customer Support

    Hmm looks like you haven’t added the hover color CSS for sticky navigation though?

    Should be something like this:

    .main-navigation.navigation-stick .main-nav ul li > a:hover, 
    .main-navigation.navigation-stick .main-nav ul li > a:focus,
    .main-navigation.navigation-stick .main-nav ul li.sfHover > a {
    	color: #FFFFFF;
    	background-color: #1e72bd;
    }
    #387628
    Luís

    Hi Leo. I know I didn’t added the css. I didn’t know what css to add and that was the all point. You did back there already pointed me out to a page with the exact last snippet you added above but it didn’t turn out well back then. This time I managed to tweak it the way I needed. So this is how it ended working. I hope it helps somebody else searching the same end result.

    Thanks!

    /* sticky menu > set main nav bg color (for transparency decrease value 1.0) */
    .main-navigation.navigation-clone {
    background-color: rgba(255,255,255,1.0);
    }

    /* sticky menu > set main nav text color */
    .main-navigation.navigation-stick .main-nav ul li a {
    color: #000000;
    }

    /* sticky menu > set main nav text hover color */
    .main-navigation.navigation-stick .main-nav ul li > a:hover {
    color: #ff7331;
    }

    /* sticky menu > set main nav text current color */
    .main-navigation .main-nav ul li[class*=”current-menu-“] > a {
    color: #ff7331;
    }

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.