- This topic has 15 replies, 3 voices, and was last updated 2 years, 4 months ago by
Ying.
-
AuthorPosts
-
September 20, 2022 at 1:53 am #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
September 20, 2022 at 1:57 am #2348201Fernando 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/
September 23, 2022 at 12:06 am #2351322Jin
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.
September 23, 2022 at 12:15 am #2351334Fernando 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?
September 23, 2022 at 12:24 am #2351343Jin
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.
September 23, 2022 at 12:32 am #2351349Fernando 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 toMerge
.
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.
September 23, 2022 at 3:26 am #2351465Jin
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 – SettingsSeptember 23, 2022 at 10:40 am #2351877Ying
StaffCustomer SupportHi 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 🙂
September 24, 2022 at 1:35 am #2352246Jin
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.)
September 24, 2022 at 11:54 am #2352699Ying
StaffCustomer SupportJust 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!
September 25, 2022 at 1:25 am #2352966Jin
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
September 25, 2022 at 7:20 pm #2353605Fernando 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; }
September 30, 2022 at 4:12 am #2358644Jin
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 belowI know that this is a very specific feature to implement.
Appreciate any help.
September 30, 2022 at 11:11 am #2359171Ying
StaffCustomer Support1. 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 belowIt 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.
October 2, 2022 at 1:54 am #2360294Jin
Yes you’re right thanks.
-
AuthorPosts
- You must be logged in to reply to this topic.