Two questions on Mega Menu

Hi Suman,

For 1, please see: https://www.megamenu.com/documentation/flex-variable-width-menu-items/

For 2, I think you must have had a caching issue. I have checked your site and see the “Home” menu item on all pages now.

Thank you so much, I have an issue with the first though. I don’t even have a way to attach the screenshot to show my issue with before and after. Still I will try to explain the scenario what is happening.

Before addressing the issue, the logo was on top and the Mega Menu went below that, the menus were arranged to the left, leaving the right side of the menu blank.

So, after you addressing the issue and I copied the code, the menu strikes the logo entirely I can’t see the logo at all. What would be the setting for that please.

Regards
Suman P.

Hi Suman,

Please can you upload screenshots to imgur.com (or any other image hosting service) and paste links to them here?

Thank you, here are the list of images for clear understanding
1 https://i.imgur.com/6ubAAnB.jpg
2 Menubar1 https://i.imgur.com/DsMDhKr.jpg
3 Menubar2 https://i.imgur.com/S0UpBOL.jpg
4 Menubar3 https://i.imgur.com/tQpd5xu.jpg
5 Menubar4 https://i.imgur.com/59E4Cra.jpg
6 Generalsettings1 https://i.imgur.com/wRm7oRm.jpg
7 Generalsettings2 https://i.imgur.com/xYgJiwn.jpg
8 Customstyling https://i.imgur.com/8WMmXmZ.jpg

Regards
Suman P.

Hi Suman,

Thanks.

Please try adding the “Flex Variable Width” CSS again, and also this:

.mega-menu-main-navigation .site-branding {
    float: none;
}

Hopefully you will now have the logo, then the menu on a new row, and the menu item spread equally across the menu bar.

Hi,
I am not good at CSS as I am not a developer, can you please correct me.

@include desktop {
#{$wrap} #{$menu} {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

> li.mega-menu-item {
-webkit-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;

/** Do not grow menu items with “.mega-no-flex” class **/
&.mega-no-flex {
-webkit-box-flex: 0;
-webkit-flex: 0 0;
-ms-flex: 0 0;
flex: 0 0;
}

.mega-menu-main-navigation .site-branding {
float: none;
}

/** Center align text within menu item **/
> a.mega-menu-link {
text-align: center;
white-space: nowrap;
}
}
}
}

Regards
Suman P.

Hi Suman,

Remove everything from the Custom Styling textbox.

Then add this CSS:

https://www.megamenu.com/documentation/flex-variable-width-menu-items/

Then, on a completely new row (not within any other brackets), add:

.mega-menu-main-navigation .site-branding {
    float: none;
}

Thank you so much. It worked