How to Get the Menu to be Full Width

  • Resolved TheMusik

    (@themusik)


    9 years ago

    So I understand the plugin allows the mega menu to be full width of your themes wordpress menu. My problem is that my theme has broken the menu down in to smaller containers so the 100% width just goes from text to text of my menu items and I need it to go across the entire page. I have tried increasing the width of the panel in the settings but there is no option for margin and I don’t know how to reference the panel via css. Is there anything you recommend to get this menu to stretch the full width?

    My html is setup like this

    `
    <div-id=”Menu-Top”>
    <div-id=”Menu-Right”>
    <div-id=”Menu-Center”>
    <div-id=”mega-menu-wrap-et_header_top”>
    </div>
    </div>
    </div>
    </div>

    <div-id=”Menu-Top”> this is the full width of the page
    <div-id=”Menu-Right”> this is a small search and profile link in top right corner
    <div-id=”Menu-Center”> this is the actual website menu and it’s just the width of the menu items
    <div-id=”mega-menu-wrap-et_header_top”>
    Inside Menu-Center is the Mega-menu-wrap

    Any help would be greatly appreciated as I’ve tried to hire help on this with no luck. This menu is the key to launching and this plugin would be perfect if I can fix this one issue.
    Thanks
    You can see the menu here.
    https://treasurecoastconnect.com

    https://wordpress.org/plugins/megamenu/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author megamenu

    (@megamenu)

    9 years ago

    Ideally you would modify your themes header.php file so that the 3 menus weren’t wrapped inside each other like that, but if you can’t do that then CSS will push the middle menu down onto a new line:

    .top-menu-center {
    width: 100%;
}

    Regards,
    Tom

    Thread Starter TheMusik

    (@themusik)

    9 years ago

    Hey Tom,

    Thanks so much for the response. I was able to pull it out of the other divs in the header and place it at the end. I made it 100% so the panel stretches the page and used css to move the menu back in place. But since it’s 100% and I moved it up, it places it overtop the other divs in the menu. It covers the search and profile link on the right side and the logo home link on the left side making them not clickable. Is there anything I can do to push it back? Maybe z-index? Not real sure what to do. If that can be fixed that would work perfectly.

    Thanks again for the great plugin and the fast help!

    Plugin Author megamenu

    (@megamenu)

    9 years ago

    Hi TheMusik,

    In the last reply I thought you wanted the whole menu to be on a new line, but I think I misunderstood.

    If you want the menu positioned in the middle, but the sub menu’s to go full width, then put the menu back how it was (sorry!) and set the ‘Panel Width’ in the menu theme to ‘body’.

    Regards,
    Tom

    Thread Starter TheMusik

    (@themusik)

    9 years ago

    That did it!
    Thank you so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to Get the Menu to be Full Width’ is closed to new replies.

Tags