Float Ajax and Cart right in Navigation

[troyw]

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

[Elvin]

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.

[troyw]

Thanks Elvin. The margin seems to have worked, but I can’t see how to align the search icon?

[Elvin]

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;
}

[troyw]

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

[Elvin]

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.

[troyw]

Thanks Elvin, works great

[Elvin]

No problem.:)

[Author]

Posts