Archived topic
Navigation - Few questions
3 replies · Started by Fabien on March 27, 2020
Hi,
I've setup the following header using some information on this forum :
- Full width
- Logo on the left
- Centered primary navigation
- Secondary nav floating on the right
- Full width mega menu
I have a small issue, the primary is not perfectly centered (a bit too much on the right). Can you please help ?
Also, when the mega menu is open I'd like to add an overlay to the rest of the page. Any easy way to achieve this ?
Thanks a lot !
Hi there,
the primary nav is centred between the different sized logo (180px wide) and secondary nav (128px wide). You could compensate for this difference in width by including some extra margin in the CSS your using here:
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #00b62c;
border-radius: 3px;
color: #ffffff;
line-height: 28px;
/* add following line */
margin-left: 52px;
}
}Thanks David ! Works like a charm !
What about adding an overlay (on the rest of the page) when the nav is open ? Possible ?
Not easily - it would require some custom Javascript to 'do stuff' and its not something i would recommend on a Hover event as it could create a rather unpleasant and jumpy experience for the user.
