[Support request] Logo on left side header, menu centered, and icon search and basket on right.

Home Forums Support Logo on left side header, menu centered, and icon search and basket on right.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1473613
    Marcin

    Hello, I would like the logo on the left side, the menu in the middle and the basket and search on the right side. Is there an easy way to do something like this? https://ibb.co/BrSJ5N0

    #1473621
    Leo
    Staff
    Customer Support

    Hi there,

    Our site Target uses a similar layout:
    https://gpsites.co/target/

    And it’s using this CSS:

    /* Primary navigation styles */
    .main-navigation:not(.slideout-navigation) .main-nav {
        flex-grow: 1;
    }
    
    .main-navigation .main-nav {
        text-align: center;
    }
    
    @media (min-width: 769px) {
        .nav-aligned-right .main-navigation .menu li.search-item,
        .nav-aligned-right .main-navigation .menu li.wc-menu-item  {
            float: right !important;
        }
    }
    #1473650
    Marcin

    Thank you for the quick reply. I have one more little question, how to add an additional login icon next to the search and cart icons. Similar to the previous screenshot?

    #1473872
    Leo
    Staff
    Customer Support

    You would add the icon with a custom class like login then edit the CSS to this:

    /* Primary navigation styles */
    .main-navigation:not(.slideout-navigation) .main-nav {
        flex-grow: 1;
    }
    
    .main-navigation .main-nav {
        text-align: center;
    }
    
    @media (min-width: 769px) {
        .nav-aligned-right .main-navigation .menu li.search-item,
        .nav-aligned-right .main-navigation .menu li.wc-menu-item,
        .nav-aligned-right .main-navigation .menu li.login  {
            float: right !important;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.