[Resolved] Set Up Mega Menu Width

[Sara Genone]

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

[David]

Hi there,

can you provide a link to your site so i can provide a fix for that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara Genone]

Sure 🙂
Thank you

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sara Genone]

Thank you Tom
I resolved
Sara

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts