[Resolved] Float Ajax and Cart right in Navigation

Home Forums Support Float Ajax and Cart right in Navigation

  • This topic has 7 replies, 2 voices, and was last updated 6 days ago by Elvin.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1446535
    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

    #1446545
    Elvin
    Customer Support

    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.

    #1446613
    troyw

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

    #1446623
    Elvin
    Customer Support

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

    #1446753
    Elvin
    Customer Support

    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.

    #1453122
    troyw

    Thanks Elvin, works great

    #1453282
    Elvin
    Customer Support

    No problem.:)

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.