- This topic has 6 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
-
Posts
-
hello
I was getting trouble in making full-width horizontal submenu, I have tried the code that was provided by the customer support ie.
.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;
}
the problem I was facing particularly in this is
1 It is not becoming a full-width submenu
2 submenu are not aligned to the center
other than that the code is working fine
hope you have a solution to this.Customer Support
Hi there,
can you share a link to the site so i can take a look at whats required.
https://www.vabzen.com/
i have created the submenu in the seo sectionRemove whatever CSS you added so far, and try this:
@media(min-width: 769px) { .main-navigation .inside-navigation, .main-navigation ul li.menu-item-has-children { position: static !important; } .main-navigation:not(.toggled) ul li:hover>ul { display: flex; text-align: center; left: 0; right: 0; width: 100%; } }Thanks it Works.
Glad to hear that
- You must be logged in to reply to this topic.
