[Support request] Horizontal sub-menu – full width of the screen

[Rachel]

Hello GP team,

Hope that I can ask this! I’ve been able to create a horizontal submenu for a website but I’m having a hard time with two issues:
1) I can’t get the submenu background to be full-width of the screen
2) making the submenu disappear on second click of parent (to “toggle off” the submenu.. if that makes sense)

Here’s the code I’ve used so far,

body .sf-menu > li {
	position: static;
}

body .main-navigation ul.menu > li > ul {
	width: 100%;
}

body .main-navigation ul.menu > li > ul > li {
	width: auto;
}

body .main-navigation ul.menu > li > ul > li ul {
	top: 100%;
}

Extra Q: I’d also like the block of links for submenu to end below last parent link. Screenshot visual of what I mean: https://www.dropbox.com/s/iq43tsnnpc48qly/navbar.png?dl=0 . Is this possible?

[Ying]

Hi Rachel,

For question 1, try this CSS, you can add a media query that works for you.

.main-navigation:not(.toggled) .main-nav > ul > li.sfHover:before, .main-navigation:not(.toggled) .main-nav > ul > li:hover:before {
    content: "";
    height: 42px;
    width: 100vw;
    right: 0;
    top: 76px;
    position: absolute;
    background-color: #ffffff;
    border-top: 1px solid #ec0c74;
}
#site-navigation {
    position: relative;
}

For question 2, go to Customizer > layout > Primary navigation, set Navigation Dropdown to click instead of hover. It’s either hover or click, can NOT have hover open and click close at the same time.
https://www.screencast.com/t/HqjR8DiwP8ZC

For question 3, could you go to Customizer > layout > Primary navigation, change dropdown direction to Left? Once it’s done, we can see if there’s a CSS solution for this.

Let me know 🙂

[Rachel]

Thanks, Ying!

1) The css works except the border-top as the entire pseudo selector appears to fall behind the submenu.

2) okay – understood!

3) dropdown is switched to left. Now primary nav is left but submenu is not.

[Ying]

For 1, we’ll still need to add the border to submenu:

.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
    border-top: 1px solid #ec0c74;
}

And you have this CSS for the first menu item > submenu, which should be removed:
https://www.screencast.com/t/GIhjCJ5E0sw

For 3, I noticed you are using Floats, could you go to customizer > General, switch to Flexbox?

Let me know 🙂

[Rachel]

Okay, border added and the submenu border css (from your screencast img) removed. Floats changed to Flexbox. Submenu items now in a column. I don’t know how change it back into a row without cropping the white background or to get submenu items to float right. 😔

[Ying]

1. Go to customizer > layout > Primary navigation, set Navigation Alignment to right.
2. Go to customizer > layout > Primary navigation, set Dropdown Direction to left.
3. Try add this CSS:

.main-navigation:not(.toggled) ul li.menu-item-has-children.sfHover, .main-navigation:not(.toggled) ul li.menu-item-has-children {
    position: relative;
}
.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
    display: flex;
    width: 300px;
}
.dropdown-hover .main-navigation:not(.toggled) .main-nav > ul > li.sfHover:after, .main-navigation:not(.toggled) .main-nav > ul > li.menu-item-has-children:hover:after {
    content: "";
    height: 43px;
    width: 100vw;
    top: 76px;
    position: absolute;
    background-color: #ffffff;
    border-top: 1px solid #ec0c74;
    left: 0;
}
.main-navigation ul ul {
    box-shadow: none;
}

Disable this CSS:

body .sf-menu > li {
    position: static;
}

[rajat]

I was trying the same css but the problem iam facing
1. it is now coming to full width
2 submenu is not aligning to center
3 i had changed the colour of background but it is not working

[David]

Hi there,

can you raise a new topic where you can use the Private Information field to share a link to your site.

[Author]

Posts