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

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

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)
https://imgur.com/a/jzQawJL

Cheers!

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

fantastic thank you !

No problem :)