Archived topic
horizontal full width submenu
6 replies · Started by rajat on August 6, 2021
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.
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 section
Remove 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
