Archived topic
Help creating a navigation - top bar layout
3 replies · Started by Roberto Enrique on August 19, 2019
Recently I found a website with a navigation layout I would really like to reproduce in GP
the website is this one:
https://www.mecontroteshop.it/
So far I'm trying to do it using the "navigation as header" option but the aligning options in the customizer are not sufficient.
I would like a suggestion on how to accomplish a layout like this:
The header should be like:
Regarding the icons, i don't really know if is better to handle them using right aligned menu items or with custom coded icons.
I really like the possibility of having the login information (which transform in user menu if logged), the search as dropdown and the minicart as drop-down as well.
- - - - -
Thanks in advance for any suggestion to acchieve this look.
Hi there,
so for the navigation alignment, tricky but we could try this.
1. Set Navigation as header.
2. Add a custom CSS Class of push-right to the Login menu item.
3. Add this CSS:
@media (min-width: 769px) {
.navigation-branding {
/* Equal total width of aligned right menu items */
width: 146px;
}
.main-navigation:not(.slideout-navigation) .main-nav {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main-navigation:not(.slideout-navigation) .main-nav>ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.main-navigation:not(.slideout-navigation) .main-nav ul>li:first-child,
.main-navigation:not(.slideout-navigation) .main-nav ul>li.push-right {
margin-left: auto;
}
}Note that you will need to set the navigation-branding width to match the total width of the elements you want aligned right.
See example here:
https://woo.assemblewp.com
Check out the User Menus plugin this will allow you to dynamically display Login menus as well as change the label of the menu item to a logged in users name etc.
Thank you as always, this is a perfect starting point.
Awesome - glad to be of help
