Archived topic
Float Ajax and Cart right in Navigation
7 replies · Started by troyw on September 16, 2020
Hi guys,
Please can you advise how I can get the Ajax Search and Cart Icon to float right in my Primary Navigation Bar. Basically, I just need a gap between the Phone link and the Ajax Search / Shopping Cart.
Thanks
Hi,
You can try this css code.
#primary-menu > #menu-menu > li:nth-child(6) {
margin-left: 50px;
}
This will add a 50px margin gap between your Phone Link and your search icon.
I've noticed that your search icon isn't vertically aligned w/ the cart icon. If you want to fix that as well simply use this code instead.
#primary-menu > #menu-menu > li:nth-child(6) {
margin-left: 50px;
display: flex;
align-items: center;
}
This will turn the menu item into a flexbox that lets us use the align-items css property so we can vertically center align its content(the search icon).
Let us know if it works for you.
Thanks Elvin. The margin seems to have worked, but I can't see how to align the search icon?
Oh my bad I added the wrong selector for the vertical alignment.
You can remove display: flex; align-items: center; on the previous CSS and try this instead.
ul#menu-menu {
display: flex;
align-items: center;
}
Hey Elvin,
So the CCS looks like this, but not aligning?
#primary-menu > #menu-menu > li:nth-child(6) {
margin-left: 150px;
ul#menu-menu {
display: flex;
align-items: center;
}
Cheers
It should look something like this.
#primary-menu > #menu-menu > li:nth-child(6) {
margin-left: 150px;
}
ul#menu-menu {
display: flex;
align-items: center;
}
They are 2 separate selectors.
Thanks Elvin, works great
No problem.:)