CSS Styling issue for mega menu

http://69.175.75.178/~cliffjoynerconst/new-custom-homes/

I would like to make the mega menu 500px wide instead of full screen. The element seems to be inline and does not want to be styled. Can you please give me the CSS that will make this happen, experts :slight_smile:

Thanks.

  • Ken Kimbrell

    Hello Meredith-

    I understand you are looking to find a way to make your mega menu to not render in full-width. I believe mega menu offers this in their options. If you would like for me to take a closer look and see how we can achieve your desired look, I would be happy to.

    Could you please grant us temporary support access to your website so we can have a better look of your setup and settings? You can grant us access via WPMUDEV Dashboard plugin, there's no need to share credentials. Here's our detailed documentation page about it:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    We'll wait for your confirmation reply here, as we don't get any notification when a member is granting us support access. We could then dig in and further investigate this!

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell

    Hello Meredith-

    I was able to find a path to resolution for you. This did cause some styling issues, so you may need to restyle the links back to your liking. However it restricted the width of the mega menu to a more desired width. This also enables custom options where you can go to each submenu and custom style that option to your liking.

    You will want to go to your wordpress dashboard, find Appearance > Menus.

    Next find Max Mega Menu Settings and tick Enable. This enables the custom settings, you can then go to a sub item and customize that mega menu sub-item. See image below:

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

  • Ken Kimbrell

    Hello Meredith-

    I have come up with a custom CSS code that is now implemented on your site and has created the desired effect you are after. Now this is not an iron clad solution, and needed quite a few workarounds to generate the desired result you are after. Unfortunately the way your theme designed the mega menu, there is no real simple way of making it your own, without overriding all of their styles. You can find the custom code below:

    .mfn-megamenu{
        width:500px !important;
        background:transparent !important;
        box-shadow: none !important;
        position:relative;
    }
    
    #menu-item-312 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:266px !important;;
        background: rgb(47,47,47) !important;
    }
    
    #menu-item-310 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:266px !important;
        background: rgb(47,47,47) !important;
    
    }
    
    .custom_hide_label{
        text-indent:-999px;
        pointer-events: none;
    }
    
    #menu-item-313 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:407px !important;
        background: rgb(47,47,47) !important;
    }
    #menu-item-314 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:407px !important;
        background: rgb(47,47,47) !important;
    }
    
    #menu-item-311 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:517px !important;
        background: rgb(47,47,47) !important;
    }
    
    #menu-item-315 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:517px !important;
        background: rgb(47,47,47) !important;
    }
    #menu-item-317 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:622px !important;
        background: rgb(47,47,47) !important;
    }
    
    #menu-item-318 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:622px !important;
        background: rgb(47,47,47) !important;
    }
    #menu-item-309 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:740px !important;
        background: rgb(47,47,47) !important;
    }
    
    #menu-item-316 ul{
        width:250px !important;
        position: sticky !important;
        margin-left:740px !important;
        background: rgb(47,47,47) !important;
    }

    This code resides in your Rocket Builder Options > Custom CSS and JS. The code is located at the bottom and is commented /* Custom Mega Menu by WPMU support */.

    A little about the code, it is positioned sticky, with massive margin positioning. When I tried to position relative, this caused the elements to move too much. Because your header menu starts out in the center, is responsive and once sticky aligns to the left. Created quite a few obstacles I needed to overcome. Now the positioning of the submenus are even when the header menu is center, and once your header menu goes sticky, this does create and offset alignment of the submenu but they still maintain under the parent dropdown. This goes with different viewport widths, this will cause the positioning of the submenus to lightly change as the viewport widths change. The ultimate goal for me was to keep the submenu under the parent dropdown. I was successful in doing that.

    My other obstacle was that some of your submenus were uneven. Meaning one column had 4 list items while the other column had 3 list items. This caused a gap in the submenu container and was not aesthetically pleasing to the eye. My work around was to create a custom menu item with an empty link and default label. Then I added a custom css selector to that menu item and then applied this css:

    .custom_hide_label{
        text-indent:-999px;
        pointer-events: none;
    }

    I hid the label with text indent, so if a user for whatever reason highlighted that empty column by right clicking and dragging they will not see the label at all. A simple solution would to of made the color of the label the same color as the background. Again they would still see it if they highlighted over it. I am a stickler for the simple things like that. So bye bye label. Then I needed to add a pointer-events of none. This completely disables the menu item and it is impossible to click. The end result is an empty space completing the missing piece to the submenu.

    Again I applied the custom CSS, if you are unhappy with the results, you can simply remove it and it will return back to its normal state. As of right now this is the only option I can see to coming very close to your desired result.

    Let me know how this works for you!

    Take Care,

    Ken - WPMU DEV Support

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.