Site logo

Archived topic

How to do vertical menu

18 replies · Started by Ivan Cazorla on December 12, 2018

Viewing posts 1–15 of 19

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

thanks,
ivan

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.

Hi there,

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

let me know.

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

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

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/

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?

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

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

Can you share a link?

You have this CSS:

.site-header {
    display: none
}

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

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

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?

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

This archived topic is closed to new replies.