[Resolved] Navigation drop down visible

[Pearson]

Hi,

I have seen a few of these topics, but none have fared well, unfortunately. When a sub-section page is landed on I’d like to keep the sidebar nav toggled open showing the sub-section family and the selected sub-section.

Again, I’d like to keep the Grades on the side nav visible, the link sent with the ticket is where I’m at currently.

I am using the suggested CSS from another post, unsuccessfully:

.sidebar .main-navigation .main-nav .current-menu-item .sub-menu,
.sidebar .main-navigation .main-nav .current-menu-ancestor .sub-menu {
opacity: 1;
left: auto;
right: auto !important;
position: relative;
width: 100%;
clear: both !important;
top: auto;
float: none;
visibility: visible !important;
pointer-events: auto;
height: auto;
display: block;
}

.sidebar .current-menu-item .dropdown-menu-toggle,
.sidebar .current-menu-ancestor .dropdown-menu-toggle {
display: none;
}

Thanks in advance GP Team!

[Leo]

Hi there,

You are using secondary navigation in the sidebar so can you try this instead?

.sidebar .secondary-navigation .main-nav .current-menu-item .sub-menu,
.sidebar .secondary-navigation .main-nav .current-menu-ancestor .sub-menu {
    opacity: 1;
    left: auto;
    right: auto !important;
    position: relative;
    width: 100%;
    clear: both !important;
    top: auto;
    float: none;
    visibility: visible !important;
    pointer-events: auto;
    height: auto;
    display: block;
}

.sidebar .current-menu-item .dropdown-menu-toggle,
.sidebar .current-menu-ancestor .dropdown-menu-toggle {
    display: none;
}

[Pearson]

My hero, you are.

Thanks Leo!

[Leo]

No problem 🙂

[Margaret]

Hello,

I believe I am trying to achieve the same thing on my site. In the sidebar menu, rather than having arrows that open up the submenus, I would like the submenus to be always visible and indented from the left. I tried the above code but it was not successful.

UPDATE:

Please disregard! I solved the issue. I just had to remove “.current-menu-item” from the above code.

[Leo]

Glad to hear 🙂

[Margaret]

Hello, I have another question about this topic. I am using the following code, and it is working:

.sidebar .secondary-navigation .main-nav .sub-menu,
.sidebar .secondary-navigation .main-nav .sub-menu {
    opacity: 1;
    left: 20px !important;
    right: auto !important;
    position: relative;
    width: 91.5% !important;
    clear: both !important;
    top: auto;
    float: none;
    visibility: visible !important;
    pointer-events: auto;
    height: auto;
    display: block;
	box-shadow: none;
}

Within Customize > Colors > Secondary Navigation, I have Background: #eeeeee, Background Hover: #ffffff, and Background Current: #ffffff. These colors work perfectly when I am using the Customizer. However, once I click “Publish,” and view the website normally, “Background Current” displays incorrectly as #eeeeee. When I hover over an item, the Background Hover displays correctly as #ffffff. However, Background Current doesn’t seem to be working.

Thanks!

[Leo]

Can you open a new topic and link us to the page in question?

Thanks 🙂

[Author]

Posts