[Resolved] How to change the background of primary navigation to an image

Home Forums Support [Resolved] How to change the background of primary navigation to an image

Home Forums Support How to change the background of primary navigation to an image

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2348196
    Jin

    I’m looking to change the background of the primary navigation to an image. I know that you can do so under “Appearance” > “Customize” for colours / colour codes.

    The closest thing I’ve found it this but it doesn’t explain any further than referring you to “Elements”.

    Would appreciate slightly more detailed instructions.

    Thank you

    #2348201
    Fernando
    Customer Support

    Hi Jin,

    You can do so with the Backgrounds Module. In Appearance > GeneratePress, make sure Backgrounds is enabled.

    Then, go to Appearance > Customize > Backgrounds, and set the background image to your preferred location.

    Reference: https://docs.generatepress.com/article/backgrounds-overview/

    #2351322
    Jin

    Hi Fernando

    Thanks for your help.

    I’ve done as you suggested and read the reference link. I’m wasn’t able to get the result that I was expecting. Is there an option where I can use one single image as the background for the entire primary menu?

    As you can see for yourself, it looks odd with the current GeneratePress settings.

    I’ve tried other settings as seen here.

    This is what I’d like to achieve.

    #2351334
    Fernando
    Customer Support

    I see. You’ll need a different approach to achieve your goal.

    Are you planning to do this just in the Front Page? Or the Entire site?

    #2351343
    Jin

    I’m planning to do this for just the primary menu on every page on the website. And I think I have to only upload one photo since it’ll create unevenness as you can see at the moment.

    #2351349
    Fernando
    Customer Support

    Well, the way to approach this for instance in your Homepage is something like this:

    1: Create a Header Element.
    2. Set the Merge to content setting to Merge.
    3. Set the Display rule to Front Page.
    4. Then, add the Background to the Container Block of the First Section of your Front Page.
    5. Then, in Appearance > Customize > Colors, set the color of your Header and Primary Nav to transparent.

    The same concept would apply for other pages.

    The key thing to remember is the Merge Header Element, and then the First Section should have the Background. Usually, for coherence and ease of use, using a Block Element – Page Hero for the first section of pages would be ideal.

    #2351465
    Jin

    Hi Fernando

    Thank you. That worked perfectly.

    Just one problem now: When I scroll down, the primary menu’s background becomes white.

    I don’t know why this is – I didn’t change this anywhere.

    You can check my settings in “Customize”:
    Background Images
    Background Images – Header
    Background Images – Primary Navigation
    Customize – Colours
    Element – Header – Settings

    #2351877
    Ying
    Staff
    Customer Support

    Hi Jin,

    As you are using navigation as header option, so the color set for header will not work.

    You need to set the color for the primary navigation at customizer > colors > primary navigation 🙂

    #2352246
    Jin

    Hi Ying

    I’ve done it and it’s white now. But how can I have it so that the background is the image (of the colour gradient) that’s current in the first element of the homepage?

    This is my current settings in customizer.

    (Previously when I didn’t set any background colour for the primary menu in customiser, the outcome was the primary menu was completely transparent when I scrolled down. The background was only the image if the user scrolled to the very top of the page.)

    #2352699
    Ying
    Staff
    Customer Support

    Just to confirm, you want the primary navigation to have transparent background when it’s non-sticky, but white background when it’s sticky?

    Let me know!

    #2352966
    Jin

    Yes, that’s correct. Transparent background when it’s at the top of page.

    But white background when you’re scrolling down or anywhere else.

    Thank you

    #2353605
    Fernando
    Customer Support

    I see. Thank you for clarifying. Can you try setting the color in Appearance > Customize > Colors > Primary Navigation back to transparent?

    Then, add this CSS in Appearance > Customize > Additional CSS:

    nav#sticky-navigation.is_stuck {
        background-color: #fff;
    }
    #2358644
    Jin

    Hi Fernando

    This causes another weird issue because now the drodowns (when you hover over one menu element) all have a transparent background too which makes it difficult to read the text.

    Is it possible to specify:

    1. The background colour of the navigation bar is transparent when the user is at the very top of the page
    2. The background colour of the navigation bar changes to white background if the user leaves the top of the page to scroll anywhere below

    I know that this is a very specific feature to implement.

    Appreciate any help.

    #2359171
    Ying
    Staff
    Customer Support

    1. The background colour of the navigation bar is transparent when the user is at the very top of the page
    2. The background colour of the navigation bar changes to white background if the user leaves the top of the page to scroll anywhere below

    It has been achieved already, hasn’t it?

    Your issue is sub menus now? Do you want them to have a white background all the time?

    If so, you can set the sub menu background color in customizer > colors > primary navigation > sub menu background.

    #2360294
    Jin

    Yes you’re right thanks.

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