[Resolved] How do I align my menu icon, button, and logo like this?

[Andy]

Hi there,

– I’d like to move my off-canvas menu icon to the left corner
– I’d like to move my button to the right corner
– I’d like to center align my logo

Example: https://imgur.com/a/LkEOD3x

Is this possible? Thank you in advance!

[David]

Hi there,

try this CSS:

.main-nav {
    position: relative;
}

.navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.main-nav {
    width: 100%;
}

.nav-aligned-right .main-navigation ul {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.nav-aligned-right .main-navigation ul li.slideout-toggle {
    margin-right: auto;
}

[Andy]

Perfect, thank you David! 2 quick questions:

– The logo doesn’t link to ‘homepage,’ how can I fix this?

– Is there a way to add padding to the right of the orange button? Similar to the menu icon? It is sticking to the wall (in mobile view)

View post on imgur.com

Cheers!

[Leo]

Edit this:

.navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

to this:

.navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}

Then add this:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li.sub-button a {
        margin-right: 20px;
    }
}

[Andy]

fantastic thank you !

[Leo]

No problem 🙂

[Author]

Posts