[Support request] Left sidebar fixed menu layout

[David]

Glad to hear that

[Jason]

Hello, being that this has to do with the exact this topic, will it be possible to make the sub-menu and sub-sub-menu (on a left sidebar navigation menu) go to the right of the main menu (see the blue rectangle from the screenshot)?

Because if you have a long menu with a lot of sub-items, they will go under the main menu and look odd.

[David]

Hi there,

this topic is related to the Sider site from the GP site library. So the solution provided here won’t work on a Sidebar Navigation.

Can you raise a new topic and share a link to your site, and we can help with that.

[Jason]

But I have Sider site from the GP site library. Im working on the exact same installation.
Here is the link: https://glcreativemedia.net/scoala/

[Fernando]

Hi Jason,

Your inquiry is a bit unrelated to the topic in this thread though. For these instances, we prefer that our customers start a new topic to avoid confusion.

In any case, can you try adding this through Appearance > Customize > Additional CSS?:

@media (min-width: 1000px) {
    .dropdown-click .main-navigation li.menu-item-has-children > ul.sub-menu.toggled-on {
        position: absolute;
        right: -290px;
        background-color: #0000ff !important;
        color: #000;
        z-index: 99999999;
        left: unset;
    }

    .dropdown-click .main-navigation li.menu-item-has-children > ul.sub-menu.toggled-on li.menu-item-has-children > ul.sub-menu.toggled-on {
        right: -200px;
    }

    .dropdown-click .main-navigation li.menu-item-has-children {
        position: relative;
    }

    header.site-header {
        overflow-x: unset !important;
        overflow: unset;
    }
}

[Jason]

Hi Fernando, I understand. I figured that anyone who uses Sider site from the GP site library can find a solution to the menu as well in the same topic.

I’ve added the code, the problem that I’m seeing is that not all submenus open at the same distance to the main menu. Navigate through all the menus and you will see: https://glcreativemedia.net/scoala/

Thank you for your help!

[Jason]

And also if you click on “Baza Materiala” the submenu goes below the visual screen, and you have to scroll until the end of the page to see the rest of the sub-menu items.

[David]

My apologies i thought you were using a different layout.
Can you remove any CSS that YOU have added that is related to the sider navigation, and ill take a look at what is required.

[Jason]

The CSS that I’ve added has nothing to do with the layout, it’s only colors, etc.
If you really want I can do it, but it will not affect anything, because I checked already.
It’s only some styles to the main menu colors, background, etc.

[David]

Remove the CSS that Fernando provided above, and try this:

@media (min-width: 1000px) {
    .site-header .main-navigation li {
        display: block;
        width: 100%;

    }
    .inside-navigation,
    .main-navigation li {
        position: static !important;
    }

    .dropdown-click .main-navigation li.menu-item-has-children>ul.sub-menu.toggled-on {
        position: absolute;
        right: -200px;
        background-color: #0000ff !important;
        color: #000;
        z-index: 99999999;
        left: unset;
        top: 0;
        bottom: 0;
        max-height: 100vh;
        padding: 280px 0 80px;
        display: flex;
        flex-direction: column;
    }

    header.site-header {
        overflow-x: unset !important;
        overflow: unset;
    }

}

Note i have made it so the Sub Menu fills the height of the viewport, and its content are vertically centred, this will stop menus from falling off the bottom of the screen.

[Jason]

Hmm… ok, I was thinking something more like this: https://boutiqueabc.com

[Jason]

Also, there is a problem with sub-sub-menu items.
Go on “Activități – Concursuri”

[David]

I updated my CSS above

[Jason]

Perfect! Would it be possible to change the icons on the menu from up arrow (when menu is closed) and down arrow (when menu is opened) to just right arrow (https://fontawesome.com/icons/angle-right?s=solid&f=classic) ?

[David]

You could just rotate the current icon ?

.dropdown-menu-toggle > .gp-icon svg {
    transform: rotate(-90deg) !important;
}

[Author]

Posts