[Resolved] 8 Column Mega Menu

Home Forums Support 8 Column Mega Menu

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1523147
    troyw

    Hi team,
    I have asked about this previously, but am still really stuck.
    I am using your mega menu which looks and works great, but it is limited to 5 columns. You suggested instead using Mega Menu plugins, but they are causing lots of problems, so I am back to your mega menu.

    So I have adapted your CSS and added more columns to the style sheet like so;
    ` 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-5>ul>li {
    width: 20%;
    }

    nav .main-nav .mega-menu.mega-menu-col-6>ul>li {
    width: 16.6%;
    }

    nav .main-nav .mega-menu.mega-menu-col-8>ul>li {
    width: 11%;
    }

    The problem I am having is that I cannot seem to get the alignment of the columns equal. I believed that the 8 column mega menu should have a width of 12.5%, but this does not work. The only way it works is if I set it to 11%, however the spacing between columns is not equal?
    How do I make equal spacing between columns?

    Thanks

    #1523620
    David
    Staff
    Customer Support

    Hi there,

    the Mega Menu will automatically create new rows, so if you set up a 4 x Column mega menu and assign 8 sub menus it will wrap over 2 rows. The new flexbox version causes the incorrect columns. Try updating the CSS to this:

    @media (min-width: 769px) {
        nav .main-nav .mega-menu {
            position: static;
        }
    
        nav .main-nav .mega-menu>ul {
            position: absolute;
            width: 100%;
            left: 0 !important;
            display: flex;
            flex-wrap: wrap;
        }
    
        nav .main-nav .mega-menu>ul>li>a {
            font-weight: bold;
        }
    
        nav .main-nav .mega-menu>ul>li {
            width: 25%;
        }
    
        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-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;
        }
    }
    #1524600
    troyw

    Hey guys,

    I have changed the menu to a 4 column and replaced the CSS. This has indeed given me the two rows, but the bottom row is out of alignment still? As you will see, ‘Pro Audio’ should be the last column, but has been added to a 3rd row.

    Also, when I change the color of the Main Navigation for the mega menu using the above css, it also changes the color of the main menu (Home sub menu items). Is there a way to avoid this?

    Thanks

    #1525984
    troyw

    Hey team,

    Not sure if my last response was lost due to me editing it. Any ideas how I can straighten the bottom row of the mega menu and change text to Home drop down menu to white.

    Sorry to be a pest, thanks

    #1526130
    Leo
    Staff
    Customer Support

    Sorry we missed the last reply!

    I’ve assigned this to David as it looks like he had a good handle on it.

    He will get back to you in a few hours 🙂

    #1526138
    troyw

    Thanks Leo

    #1526344
    David
    Staff
    Customer Support

    Can you check the URL and IP ? As i am still seeing the original site.

    #1527427
    troyw

    Try this David

    #1527966
    David
    Staff
    Customer Support

    Thats the same as before – and sorry but i still can’t access it even after flushing all DNS.
    Ill see if one of the other team members can get it to work.

    #1528757
    Tom
    Lead Developer
    Lead Developer

    I’m having the same issue. I’ve added the URL and IP to my hosts file, and flushed my dns, however I’m still seeing what I assume is the old site.

    Do you have a temp site you can apply the CSS and menu to so we can see it there?

    #1529008
    troyw

    I have a dev site which I haven’t used for a while, but it will again need a hostfile update. I added the css and the same issue occurs with the mega menu. Let me know if you can access this one.

    #1529017
    troyw

    Please also see this image

    #1529028
    troyw

    Not sure if this will help, but I am adding this menu css classes ‘mega-menu mega-menu-col-4’ and this is all the css in my Child Theme Style Sheet;


    @media
    (min-width: 769px) {
    nav .main-nav .mega-menu {
    position: static;
    }

    nav .main-nav .mega-menu>ul {
    position: absolute;
    width: 100%;
    left: 0 !important;
    display: flex;
    flex-wrap: wrap;
    }

    nav .main-nav .mega-menu>ul>li>a {
    font-weight: 500;
    }

    nav .main-nav .mega-menu>ul>li {
    width: 25%;
    }

    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-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-navigation .main-nav > ul > li > ul > li > a {
    background-color: inherit;
    font-size: 14px;
    color: #F4C424;
    }

    .main-navigation .main-nav > ul > li > ul > li:hover > a {
    background-color: #1a1a1a !important;
    color: #F4C424;
    }

    @media
    (min-width:1024px){
    .main-nav ul li:nth-child(7) {
    margin-left: 80px;
    }
    }

    @media
    (max-width:768px){
    .main-nav ul li:nth-child(7) {
    margin-left: auto;
    }
    }
    .clickable-container {
    position: relative;
    }
    .clickable-container a {
    position: absolute;
    height:100%;
    width:100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    }
    array(
    ‘show_top_links’ => ‘true’,
    ‘show_empty_brands’ => ‘false’
    )

    #1529407
    David
    Staff
    Customer Support

    In your child theme styles i see this:

    @media (min-width:1024px){
    .main-nav ul li:nth-child(7) {
        margin-left: 80px;
    }
    }
    @media (max-width:768px){
    .main-nav ul li:nth-child(7) {
        margin-left: auto;
    }
    }

    Remove them to resolve the issue.

    #1530362
    troyw

    Hey David,
    I have removed this CSS from line 83 as you suggested and while it has fixed the menu issue, the space between the ‘phone number’ and ‘My Account’ has been removed. That CSS gave me that gap. Is there another way I can create a gap in the navigation to seperate the account and cart from the site links?

    Good: https://ibb.co/SJj1F59
    Bad: https://ibb.co/F0hkM5C

    Thanks

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.