Need a little hand-holding

I am not an expert, but believe that your issue with the menu appearing behind the main content on your page will relate to the css z-index headings. The first place to start is in the Menu Theme Settings where the default sets the Z-Index at 999 – I would add a nine and make this 9999 and see if it now appears over the top – after saving and a refresh of course.

If you have no luck here you may need to reduce the z-index settings as at the moment your ‘container div class’ is allowed in front of your topnav class, so you may need to alter, or create z-indexes for these classes so that the nav menu will dropdown on top. That means the container z-index will need to be less than the 9999 above.

Before changing anything make a backup stylesheet.

Regarding the 100% width, I believe this will relate to the width of the meu div it is inheriting, so if your menu is 100% wide – i.e, same as page you will be fine, else you may need to set a larger pixel size e.g. 1500px will make it wider, but this will also occur on a 100ox wide screen, so better to somehow make sure your topnav div is 100% wide to start with.

Hopoe some of this helps.

Hi Ovidiu,

You’ll need to edit your themes style.css file and remove the ‘overflow: hidden’ rule from the #header selector. I think it appears twice in your stylesheet, so make sure you find and remove both instances.

It looks like your theme is caching the CSS so also make sure the caches are cleared after making the changes ??

Regards,
Tom

THx, was on extended holiday, hence my late reply :-/

I’m kinda figuring this out but I’m struggling with the positioning…
Check this screen shot: https://screencast.com/t/B4HExGxYw
I was trying to create a Mega Menu that is as wide as my theme but the problem is it starts right under the menu that triggers it instead of being left aligned and centered over my theme. Is that possible somehow?

I’ve managed to do so with some css but I’m afraid this will break on different resolutions, etc. Any opinions on this “solution”? => https://screencast.com/t/KG1F5xmyk

What I meant when I asked about positioning the menu is easily explained with a screen shot: https://screencast.com/t/PTD6muu95ua

Can you somehow trigger the mega menu visible in the image by hovering above the DEMO button and still have it appear exactly how and where it appears right now?

Any more help please? My first attempts are currently live here: https://foodandchatter.co.za/ (struggling wit hthe menu position and width ??

Hi Ovidiu,

At the moment your only option is to set the Panel Width setting in the theme to a pixel based value, eg 500px.

By default the mega menu will be aligned to the left edge of the menu item above, you can switch it to align to the right edge by changing the “Sub Menu Align” option in the menu item settings.

It’s not possible to have the sub menu align to the left of your site, and be 100% of the width of your site. The menu doesn’t “know” about your theme, it only knows about itself. Thats why setting the Panel Width to 100% will make the panels 100% of the width of the menu itself (not the site).

Regards,
Tom

Ok, giving this another go on another site. INitial state: https://screencast.com/t/HItzaYJ8L

So I gave it a fixed width and aligned it left instead of right => https://screencast.com/t/oL8NScQc

I guess what I want is simply not possible or is there another way but not with this plugin maybe?

I actually started searching the web to see if there’s a site which has a menu like what I’m thinking of but can’t find one right now.

Just to make sure I understand this right:

Its not about the positioning of the whole menu, whether I have it floating left or right but about the position of the menu item where I want a submenu right?

So if my desired submenu isn’t on the far left or right, this thing will never align, right?

Ok, I take it all back, here is what I want and its on your demo page so how would I get this on my example in my last post? => https://screencast.com/t/h4HRgYGua1

###edit###
I assume these steps should lead to the desired effect?
– make menu full width of page
– change the Panel Width setting in the theme to 100%

Hi Ovidlu,

Since my last response things have changed a bit.

To recap (this bit hasn’t changed), on maxmegamenu.com (https://screencast.com/t/h4HRgYGua1) the Panel Width has been set to 100%. The sub menu is therefore 100% of the width of the menu itself. This is what you’re seeing here too: https://screencast.com/t/HItzaYJ8L; the sub menu is 100% of the width of the menu itself. The difference is your menu isn’t spanning the full width of your theme.

There is some new functionality in MMM which you can utilise to get the sub menu to ‘break out’ of the width of the menu itself. To do this you need to look at the HTML of the page and find the <div> that wraps your site content. It will probably look something like:

<div id=’page’>… your page content …</div>

or

<div class=’container’>… your page content …</div>

Once you have found the element that wraps your site content you can enter the ID or class into the Panel Width setting in the menu theme.

Eg, enter “#page” or “.container” as the Panel Width in the menu theme. It can be any CSS selector as long as it references an element on the page itself. This will align the sub menu to the element you have entered.

If you could send a link to your site I will tell you what you need to use as the Panel Width.

Regards,
Tom

I found a link on your other support item.

Try setting the Panel Width to:

#content

Regards,
Tom

The site is: https://pacura.ru/

I assume I need

div id=main
or
div class=wrap ?

OK; tested, .wrap works best => https://screencast.com/t/BKupovvG

You, Sir, are a genius. As soon as I have some pocket change available I’ll go and upgrade, this plugin and the speed of your response is truly worth it.

Looks good ??

If you’re not using Chrome Dev Tools already, it’s worth taking a look. Right click on the page somewhere and click ‘Inspect Element’, you can click through the HTML of your site and it will highlight each element for you. It’s pretty good for working out which element to use as the panel width.

If you have a few spare minutes would you mind leaving a review? That would be much appreciated ??

Regards,
Tom

Review, done.

I use developer tools but wasn’t sure which element to use as id=main .wrap and #content all have the same width and are nested inside each other so I had to try them first and see which one looked best ??

You’re one step ahead of me ??

Thanks for the review, much appreciated!

Regards,
Tom