Archived topic
Menu/Header Width Issue
9 replies · Started by Brent Wilson on February 14, 2022
I am running into an issue on a site where I have the body set to a more narrow width in order to accommodate a decorative right column on the site. But setting the header to merge seems to cause it to extend out beyond the narrower body and over the decorative column. Please watch this Loom Video I made showing the issue: https://www.loom.com/share/4ddc59fc68504b069ce22ae740a3f7ae. What can I do to solve this issue?
Thanks!
Hi Brent,
Can you link us to the site?
Ooops, sorry. Here is the link: https://wordpress-483838-2431328.cloudwaysapps.com/
Try this CSS:
.header-wrap .navigation-stick:not(.gen-sidebar-nav) {
right: 14.2857% !important;
width: calc( 100% - 14.2857%) !important;
}
body .header-wrap {
right: 14.2857%;
}Let me know :)
That CSS seems to have solved the issue! Thanks so much!
Actually, that CSS solved the issue on the front page where I have the header merge applied. But it didn't solve the issue on other pages where the sticky menu still extends across the decorative right column. Any idea what I need to fix that issue? When I apply the header merge to the whole site, it is working okay on other pages. But if I don't have header merge applied to a page, the sticky menu is still extending across the full width of the site.
For example: see this page: https://wordpress-483838-2431328.cloudwaysapps.com/style-guide/. The menu is now contained within the area where I want it until I scroll down and the stick menu kicks in. Then it is displaying the sticky menu full-width.
In that case, remove.header-wrap from this CSS:
.header-wrap .navigation-stick:not(.gen-sidebar-nav) {
right: 14.2857% !important;
width: calc( 100% - 14.2857%) !important;
}Great, that seems to have solved the issue! Thanks!
You are welcome :)
