[Support request] align logo and mobile menu (hamburger) on desktop

Home Forums Support align logo and mobile menu (hamburger) on desktop

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1388589
    Jeffrey

    I have the primary nav centered.

    1. can we adjust the mobile menu to be right aligned on desktop
    2. can we adjust the logo on desktop to be left aligned somehow?

    and can the shopping cart be put on the inside as opposed to the outside..

    #1388785
    Leo
    Staff
    Customer Support

    Hi there,

    Just to make sure, you are looking for this layout on desktop?
    https://gpsites.co/target/

    #1388796
    Jeffrey

    yes 🙂

    I managed to figure out the toggle, but not the shopping cart or logo..

    #1389215
    David
    Staff
    Customer Support

    Hi there,

    you can use this CSS to position the desktop logo to the left:

    @media(min-width: 769px) {
        .main-navigation:not(.slideout-navigation) .main-nav {
            margin-left: auto;
            margin-right: auto;
        }
    }

    The shopping cart etc. i am unclear on what you need – can you explain where it needs to be on Desktop and where it needs to be on Mobile ?

    #1389656
    Jeffrey

    This is for desktop only.
    I would like the shopping cart to be to the left of the (hamburger) which is aligned to the right. I am using this code to align the hamburger currently.

    How do I add the cart next to it?

        position: absolute;
        right: 0;
    }

    Thank you on the other code to align the logo.

    Question: If I use a smaller logo will the primary navigation menu become, more centered?

    #1389693
    David
    Staff
    Customer Support

    This is like CSS Yoga lol

    Remove these two CSS rules:

    .main-navigation .slideout-toggle {
        position: absolute;
        right: 0;
    }
    
    .main-navigation:not(.slideout-navigation) .main-nav {
        margin-left: auto;
        margin-right: auto;
    }

    Then add this CSS:

    @media(min-width: 769px) {
         /* Abs position logo */
         .main-navigation {
            position: relative;
        }
        .navigation-branding {
            position: absolute;
            left: 0;
            top: 0;
        }
        /* Make nav flexible */
        .main-navigation:not(.slideout-navigation) .main-nav {
            flex: 1;
        }
        .main-navigation ul {
            display: flex;
        }
        /* Move toggle far right */
        .main-navigation .slideout-toggle {
            order: 500;
        }
        /* Force cart to right */
        nav li.wc-menu-item {
            margin-left: auto;
        }
       
        /* Force centered navigation */
        .main-navigation:not(.slideout-navigation) li:first-of-type {
            margin-left: auto;
            padding-left: 132px;
        }
    }
    #1389746
    Jeffrey

    It definitely is, haha! The philosophy and flexibility (pun intended) of generatepress is a practice all on its own, no wonder it has a huge following.

    It’s one of the best online “practices” I have ever been a part of. 🙂

    Thank you yet again for this support.

    #1389788
    Jeffrey

    One issue is that the slideout has been slightly adjusted with this last css causing the first menu item to “bunch up” or move to the right or something. You mind taking a look?

    #1389795
    David
    Staff
    Customer Support

    Corrected in the code above

    #1389817
    Jeffrey

    “bows down”

    #1390118
    David
    Staff
    Customer Support

    Glad to be of help 🙂

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