Archived topic
Set Up Mega Menu Width
5 replies · Started by Sara Genone on November 27, 2020
Hi all
I have a problem setting up my mega menu width in main navigation
As you can see here: https://www.dropbox.com/s/55iqgztvnmeexhl/mega-menu%20error.jpg?dl=0
I want it would be like this https://www.dropbox.com/s/tin3dx9bc5v7fdp/mega-menu%20whne%20sticky-menu.jpg?dl=0 (as it is in when the sticky menu is active)
How can I do that :)?
An other question is it possible to arrange the border of first and second column as the same height of the last one? Perhaps using a different css code. I put here the css code as it is now
"
/* Mega Menu */
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 33%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-4>ul>li {
width: 25%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
}
nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
.main-nav > .sf-menu > li > ul.sub-menu:after {
content: '';
height: 3px;
background-color: #777778;
width: 100%;
display: block;
margin-bottom: 0px;
}
.main-nav > .sf-menu > li > ul.sub-menu > li {
margin: 15px 0 15px 0;
}
.main-nav > .sf-menu > li > ul.sub-menu > li:before {
content: '';
height: 100%;
background-color: #777778;
width: 3px;
display: block;
position: absolute;
top: 0;
right: 0;
}
"
Thank you in advance
sara
Hi there,
can you provide a link to your site so i can provide a fix for that.
Sure :)
Thank you
Hi there,
In order to do this, your navigation would have to be full width instead of floating right.
One possible direction you could take is our Navigation as Header option: https://docs.generatepress.com/article/navigation-as-a-header/
Otherwise, you may need to look at a mega menu plugin that is a little more advanced than our CSS-only solution.
Thank you Tom
I resolved
Sara
No problem! :)