[Support request] Slideout Menü

[Michael]

Hello, I would like to have the menu like on this website https://www.rohr-real-estate.com/
, i.e. on the right and also on the smartphone on the right edge.

Thank you for your support

Addendum: I would like to solve this with slideout from the site library

[David]

Hi there,

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

[Michael]

Hello, is for a new site

[David]

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.

[Michael]

thank you

[David]

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.

[Michael]

Thanks it works on desktop but not on Smartphone

[David]

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.

[Michael]

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

[David]

Add this CSS to fix that:

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

[Michael]

Thank You, it works !

[David]

Glad to hear that!

[Author]

Posts