Archived topic
Merging page header and site header without page-specific steps
19 replies · Started by NBC on July 6, 2017
No problem. If you have any example sites you like the look of that are using the style you're going for, feel free to post them and I'll see if I can help you achieve it.
I came across a theme that offers two versions of what I was trying to accomplish with the header and menu. It showed up on the website of someone I know.
The first example is here. The baseline of the menu type aligns precisely with the baseline of the logo, and the entire unit functions as a sticky menu.
The other example appears when you click on the "Main Demo" button on that page. The logo defines the top and the menu defines the bottom of the header, which again functions as a sticky menu.
I'm not suggesting this theme is preferable to GP (far from it!), just that it provides examples of the desired results.
Those kinds of layouts are exactly what this article suggests/achieves: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
If your logo is too small doing that, you just need to increase the height of your navigation and it will increase.
Yes, I've read that article. I'm still stumped about one aspect of achieving the target result.
How does one position the logo and the menu with vertical precision within that space?
In one of the examples to which I linked, the bottom of the logo aligns precisely with the baseline of the menu type.
In the other, the logo remains at the top of the space and the menu appears at the bottom, achieving a vertical split.
How does one code the vertical position of these elements?
It would likely require just a small piece of CSS.
If you set it up using the instructions above, then link me to the page, I'll be able to get you the rest of the way.