[Resolved] Set Up Mega Menu Width

Home Forums Support [Resolved] Set Up Mega Menu Width

Home Forums Support Set Up Mega Menu Width

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1551964
    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

    #1552467
    David
    Staff
    Customer Support

    Hi there,

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

    #1552709
    Sara Genone

    Sure ๐Ÿ™‚
    Thank you

    #1553082
    Tom
    Lead Developer
    Lead Developer

    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.

    #1555070
    Sara Genone

    Thank you Tom
    I resolved
    Sara

    #1555367
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.