[Resolved] How to do vertical menu

[Ivan Cazorla]

Hi there, is it possible from the theme options to set up a vertical left menu instead on top horizontal?

thanks,
ivan

[David]

Hi there,

aside of using a sidebar nav, no. you can of course use one of the Site Libary sites such as:

https://gpsites.co/sider/

This rotates the Header to the side.

[Ivan Cazorla]

Hi there,

No way to rotate the header to the side without installing this site library?

let me know.

[David]

Here is the base CSS that Sider uses, alternatively on a clean install you can install the site without the content:

@media (min-width: 1000px) {
    body {
        margin-left: 300px;
    }

    .site-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 300px;
        z-index: 300;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch;
        transition: .1s ease;
    }

    .admin-bar .site-header {
        top: 32px;
    }

    .site-header .main-navigation li {
        float: none;
    }
}

.inside-header {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.site-branding,
.site-logo {
    order: 1;
}

.header-widget {
    order: 3;
}

.nav-float-right .inside-header .main-navigation {
    order: 2;
    float: none;
    margin-top: 30px;
    margin-bottom: 50px;
}

.nav-float-right .header-widget {
    float: none;
    top: auto;
    max-width: 100%;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation.toggled .main-nav li {
    text-align: center !important;
}

[Ivan Cazorla]

Can I install and try multiple site library themes and then come back to my original one? Should I export the setting and I am good to go?

thanks

[David]

The Library Sites are designed for a clean install. We don’t advise adding them to an production site. If you want to test you can always try it on a staging or clone. Currently switching between Sites requires a little work or a WP Reset which is covered here:

https://docs.generatepress.com/article/removing-imported-site/

[Ivan Cazorla]

I’ve used that css you gave me but only creates a white margin on the left and the menu doesn’t go there.

Any help?

[David]

the navigation needs to be set in the Customizer to Float Right.

[Ivan Cazorla]

Done, I can see the menu displaying in the customizer but not in the real view website.

[David]

Can you share a link?

[Ivan Cazorla]

Yes sir: https://ivancazorla.com/

Let me know

[David]

You have this CSS:

.site-header {
    display: none
}

But i can’t see where it is coming from due to the optimized CSS cache.

[Ivan Cazorla]

I have now all caches deactivated, and I can’t see that code written into the simple css section

[Ivan Cazorla]

Oh there it is, had another minify css plugin active. Can you provide the css styling for the menu bar from the original site library theme?

[David]

Aside of the CSS above, all of the styling was set in the Customizer settings.

[Author]

Posts