Archived topic
Navigation menu alignement changing with cart icon
9 replies · Started by Joachim on September 18, 2021
Hi there,
I have the primary navigation alignment set to right.
It's working fine but when I enable "Display cart in menu" the menu is moving to the left-hand side.
I'm currently testing with the imported Aroma starter site without having imported the demo the content.
I'm not trying to reproduce the header from the site library but simply have the primary menu aligned to the right and the cart icon.
https://www.dropbox.com/s/iyicd0f94dox7qs/Screenshot%202021-09-18%20at%2014.56.52.png?dl=0
https://www.dropbox.com/s/0d4fxh90majibau/Screenshot%202021-09-18%20at%2014.57.23.png?dl=0
Any idea?
Hi Joachim,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Sure, I've set up a staging environment.
I'm adding the credentials in the private info field :)
Hi there,
Sorry not 100% sure what you are trying to achieve here.
Can you provide a little more info?
This CSS which centers the logo/title is imported with Aroma options:
@media (min-width: 769px) {
.navigation-branding {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
.account-icon {
margin-left: auto;
}
.menu-bar-items {
flex: 1;
}
.main-navigation .inside-navigation {
border-bottom: 1px solid #e5e5e5;
}
}
Oh, I see.
I'd like to keep the primary menu on the right-hand side and the logo in the center like it is currently on the website.
But I would like to add the cart icon to that menu as well.
If I enable the “Display cart in menu” in the options it is moving the primary menu location to the left and I don't want that.
Just viewed your site and looks like the layout changed again.
So basically you want the logo in the center with everything else on the right?
If so can you set the navigation location to float right first?
https://docs.generatepress.com/article/navigation-location/
Hi Leo,
The primary navigation is already set to right and the header layout is already correct but only missing the cart icon.
However, if I enable the “Display cart in menu” option, it is messing with the menu location (see screenshot in the first post).
You can see the problem by checking the “Display cart in menu” option in the customizer.
You will immediately notice that it is messing with the menu.
Hi Joachim,
Can you try activate the display cart in menu option, and remove this CSS from customizer > additional CSS:
https://www.screencast.com/t/i3Jlt15eKCm
Let me know :)
That made the trick!
Thanks Ying :)
You are welcome :)