Archived topic
Merge navigation and page header - not working
3 replies · Started by paddyd on April 11, 2021
No idea what I've done wrong - but the navigation menu isn't showing. I've followed the instructions on https://docs.generatepress.com/article/transparent-header-and-navigation/ and looked at lots of support posts, but can't figure this out. If I look at the code, the nav menu is indeed there - but it doesn't show.
Argh.
https://sherleetooze.com/test/
Also having issues with the wave shape - is there a way to make sure that there is ALWAYS some blue below the image? Depending on the window size, there are points where the lefthand bottom corner of the image pokes below the blue. I've tried various things (container min. hgt, margin etc....but nothing works in all situations)
Hi there,
Did you set the z-index on the container to 20?
https://docs.generateblocks.com/article/container-overview/#spacing
If so can you remove that?
Bingo! I didn't put those z-index settings in there - they appear to be there by default (?) I've removed both the inner and outer settings, and now it works. Must admit I wondered if it was a z-index thing, but was looking at the nav menu trying to figure it out - not the container.
Then added this custom CSS to get the menu to the right height in desktop and mobile views (menu item height works ok for one of those - but not both):
}
.header-wrap {
margin-top: 30px;
}
@media(max-width: 1024px) {
.header-wrap {
margin-top: 0;
}
}Of course, the issues didn't end there... with the nav menu in desktop view, I gave the menu items 22px width, which is fine until you start shrinking the menu - at which point, just before it switches to mobile view, "Home" starts to overlay the image. If I set the menu item width back to 20px, it doesn't overlay the image - but when the window is wider, the menu doesn't line up on the left with the text. I'm beginning to think that merging the menu in this particular situation may not be the best option... unfortunately, I don't have a suitable background image for the site that could span the entire width/give a consistent background. A rethink is in order...
So, after all this fiddling, I've now taken the text and background image OFF the header element and returned to using the customizer->Layout->Header etc. as it seems to work more consistently. I've kept the background gradient and shape, and put the nav menu above the header. Seems to all work much better...with a little custom CSS to control the size of the site description, and a minimum height on the header element. Onward ho. Learned a bunch of things though - so all is not lost.
Glad to hear :)
