Archived topic

Navigation drop down visible

7 replies · Started by Pearson on May 10, 2018

Viewing posts 1–8 of 8

May 10, 2018 at 2:03 pm #572774

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!

May 10, 2018 at 5:29 pm #572863

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

May 11, 2018 at 5:33 am #573178

My hero, you are.

Thanks Leo!

May 11, 2018 at 8:23 am #573341

No problem :)

November 11, 2020 at 10:55 am #1527235

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.

November 11, 2020 at 12:09 pm #1527340

Glad to hear :)

November 17, 2020 at 8:57 am #1534999

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!

November 17, 2020 at 11:59 am #1535197

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

Thanks :)

This archived topic is closed to new replies.

Start building better websites today.