align logo and mobile menu (hamburger) on desktop

[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..

[Leo]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeffrey]

yes 🙂

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

[David]

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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[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?

[David]

Corrected in the code above

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeffrey]

“bows down”

[David]

Glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts