- This topic has 11 replies, 2 voices, and was last updated 6 years, 2 months ago by
.
-
Posts
-
I need to have custom navigation colors from the page header on each of several pages but I don’t want the background image from the page header to go above the primary navigation bar. I don’t see an easy way to set custom navigation bar colors per page without merging the page header into the site header. Am I missing something or is this the only option?
The URL shared with admins shows the page I’m working on. I’d like the page header container to essentially stay below the nav bar but I need to set the nav bar colors to match the page’s colors. There will be several pages like this for each of several topics for the site. The rest of the site all have a common color screen that is used on the static front page, blog, privacy page, etc.
I’m new to GeneratePress and generally loving it. Using it with Toolset and working out the few wrinkles (like the bootstrap container padding that prevented full width content). About 1/4 of the sites I manage for myself and customers have been migrated from Toolset Starter Theme to GeneratePress so far. The rest are coming. I really like the Max Mega Menu plugin (another awesome Tom) but doesn’t look like I need it anymore with Generate Press.
Customer Support
Hi there,
Can you try this solution here? https://generatepress.com/forums/topic/navigation-not-visible-on-homepage-with-elementor-pro-slider/#post-483077
Let me know 🙂
I’ll give that a try but that will mean I need to have a page header for every page to get a background color on the ones without the special color schemes and headers and I need to make the background transparent in the global colors for the primary navigation, right?
Hi Leo,
As I started to set this up I realized it won’t work. I need to set background, background hover and background current colors for the nav on these pages and if I don’t turn on merge with header, I don’t get those options. Setting background only in the regular page header settings isn’t enough.
The background color does work but only until the page is scrolled vertically. As soon as the menu switches to sticky, I lose the background color as it scrolls up with the rest of the page.
Update: I can get close to what I’m looking for by creating an empty page header (just putting a 0px high div in the content) and then leaving it merged with the header so I can set the menu colors. Then I created the banner image with overlaid content box as a section on the page instead of a page header.
But the menu switches to the colors from the customizer when it goes sticky. Is that a bug in the custom menu colors part of page headers?
Ahh I think I misunderstood your question before.
The easiest way to get custom navigation color per page is to use CSS.
If you use Tom’s Simple CSS plugin:
https://docs.generatepress.com/article/adding-css/It gives you a CSS metabox for each page so that the CSS in there are page specific, then you can use the CSS here to change the colors: https://docs.generatepress.com/article/changing-navigation-colors/
Let me know if this helps.
Thanks Leo. I figured I could do it with CSS one way or another but was hoping it could be even easier with those navigation colors settings in the page header.
Each of these “Topic” pages may have a set of child pages. With Toolset, I’d create a parent layout for each topic and use it for all the pages in the topic. I’d create a custom menu for each topic using Max Mega Menu Pro and theme those accordingly and place them in the parent layouts. Maintaining multiple copies of the same menu with different themes is a pain. So the path I was trying to follow in GP was to use a page header for all pages in a given topic as the tool to re-use thematic menu changes with only one actual menu.
Using CSS, even with Simple CSS, means that if I copy and paste the CSS to each page in a topic then need to make a change, I’ve got to re-copy and paste the CSS to all the other pages in that topic each time. Error prone and not efficient. If I could do it all in the page header CP, any changes would always affect all ages using that page header.
Might be nice to have that option whether or not the page header is being merged with the site header as a future enhancement to GP Premium. For now I’ll go the CSS route.
Is there some sort of logic in the pages you want to change the navigation color?
Like certain category? If so we can include that in CSS as well.
They are pages, not posts, so they wouldn’t ordinarily have categories. I could add categories but I don’t think you want to build a feature nor do I want to code the CSS on a non-standard WordPress thing.
The simpler thing would be inheritance. If the page specific CSS in the metabox of a Simple CSS plugin was inherited by the page’s children, I’d just make all the pages that use one color scheme children of the top level page for that scheme. That’s how I used to do page headers with Toolset Layouts — I used a view that looked for a locally set page header image. If it didn’t find one, it checked the parent page for one.
This particular site is for a harpist. The “categories” are weddings & events, on stage, ensembles & workshops and her online harp school. The main page for each of those could be the parents with each having any number of children. If they all inherited the CSS it would be perfect.
The snag in doing that manually with CSS is that any container on the page that is page specific and could be assigned a class or id to pull the CSS from the global custom CSS settings does not house the navigation so I don’t see how to easily affect the navigation colors with that approach. Is there something in GP or Simple CSS that lets me assign a class or id to the whole page including the header and navigation?
You could try doing something like this: https://generatepress.com/forums/topic/body-class/
Not sure if it would make it easier though.
I thought about that. I’d have to do a bit more code to check the parent page’s slug, essentially re-creating what I used to do with Toolset Layouts for page header inheritance but it would allow me to centralize a single set of custom CSS for the groups of pages. For the current site I’m just going to duplicate the per page CSS with Simple CSS for now as there aren’t too many pages in each group. If I end up converting some of the others to GP I’ll keep this approach in mind.
Thanks.
No problem!
- You must be logged in to reply to this topic.