- This topic has 7 replies, 4 voices, and was last updated 4 years, 8 months ago by
.
-
Posts
-
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?
Customer Support
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/HqjR8DiwP8ZCFor 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 🙂
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.
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/GIhjCJ5E0swFor 3, I noticed you are using Floats, could you go to customizer > General, switch to Flexbox?
Let me know 🙂
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. 😔
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; }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 workingCustomer Support
Hi there,
can you raise a new topic where you can use the Private Information field to share a link to your site.
- You must be logged in to reply to this topic.
