Slideout Menü

Hi there,

is this for a new site ? or an existing site ?
If it is for an existing site - can i see it?

Hello, is for a new site

OK, so you could import the Slider Site - and then we could help move the header to the right ? is that an option.
IF so import the site, and share a link to where i can see it.

thank you

Ok, go to Customizer > Additional CSS.
Inside you will see some CSS.

This CSS:

@media (min-width: 769px) {
    body {
        padding-left: 60px;
    }

    #site-navigation .navigation-branding {
        margin: 10px 0 auto;
    }

    .main-title {
        writing-mode: vertical-lr;
    }
}

#site-navigation {
    position: fixed;
    left: 0;
    min-height: 100vh;
    max-width: 60px;
    overflow: hidden;
}

Change to:

@media (min-width: 769px) {
    body {
        padding-right: 60px;
    }

    #site-navigation .navigation-branding {
        margin: 10px 0 auto;
    }

    .main-title {
        writing-mode: vertical-lr;
    }
}

#site-navigation {
    position: fixed;
    right: 0;
    min-height: 100vh;
    max-width: 60px;
    overflow: hidden;
}

Then go to Customizer > Layout > Off Canvas and change it to show on the Right.

Thanks it works on desktop but not on Smartphone

Ah ok, a few things.
First edit the CSS and replace this:

@media (min-width: 769px) {
    body {
        padding-right: 60px;
    }

    #site-navigation .navigation-branding {
        margin: 10px 0 auto;
    }

    .main-title {
        writing-mode: vertical-lr;
    }
}

with:

body {
    padding-right: 60px;
}

#site-navigation .navigation-branding {
    margin: 10px 0 auto;
}

.main-title {
    writing-mode: vertical-lr;
}

then:

Layout > Header and Disable the Mobile Header.
Layout > Primary Navigation and set the Mobile Menu Breakpoint to 0
Layout > Off Canvas make sure it set to Desktop Only.

I did everything according to your instructions, but unfortunately no toogle appears on mobile

Add this CSS to fix that:

@media (max-width: 768px) {
    .main-navigation .menu-bar-item {
        display: block !important;
    }
}

Thank You, it works !

Glad to hear that!