Archived topic
Fault when merging header
7 replies · Started by Joel on June 12, 2017
I'm having an odd issue. I got the menu working on the homepage of a site I'm working on, but when I repeat the process on other pages it pushes the menu (main and secondary) to the far right. I'm trying to either merge the menu's with header like I have on the front page. OR if possible have a coloured background for the menus on every page BUT the home page?
UPDATE:
Part of the issue here is in order to get the secondary menu to be transparent on the homepage I've had to take away the background colour.
If I add it back in for the other pages the background colour shows on the homepage too.
Is there a way to merge the secondary menu with header like the main menu? This way I wouldn't need to use <span> on the other pages avoiding the issue of the menus jumping to one side.
The alignment issue is due to the fact your page header container type is set to contained: https://docs.generatepress.com/article/merging-header-navigation-content/#setting-the-container-type
The secondary navigation doesn't currently have the same color options in the page header as the primary navigation. It would be easier to remove the background color on the pages it needs it on than to add it back to the pages that need it:
.secondary-navigation {
background-color: transparent;
}You can add that to specific pages using my Simple CSS plugin :)
Thanks for the reply Tom.
I've been trying to get that CSS working since posting my earlier comments.
I added it to the first section, custom CSS in Elementor. When still editing the page the secondary nav is transparent, but when trying to view it later the background colour is back.
I'm tried adding !important; to the css but no change.
Hi there,
The CSS is just getting overwritten right now.
Give this a shot:
.generate-combined-header .secondary-navigation {
background-color: transparent;
}Let me know.
That's got it working. Thank you!
Glad we could help!
