Public Forums 71,145 posts

[matth72 Friend matth72Join date: February 2015Posts: 6Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#203956

Hi

I’m trying to make a full-width mega menu dropdown – where all the dropdown’s sit within the Container bounds, and go edge-to-edge (so, 1140px across and fitting to the page container).

However, the menu only wants to anchor itself to the left edge of the dropdown menu item, and this is causing an issue, obviously, when some of these menu items are over to the right of the container area.

I must be doing something wrong – this can’t be deliberate design, can it? I’ve cheated it on the first drop-down menu by hacking the CSS with a negative left margin value, but this surely isn’t the right way to do this?

Help or guidance appreciated!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#560095

Your site seems still in offline mode now, you can PM me a temporary admin account of your site, I will take a look.

[matth72 Friend matth72Join date: February 2015Posts: 6Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#560104

<em>@Saguaros 459519 wrote:</em><blockquote>Your site seems still in offline mode now, you can PM me a temporary admin account of your site, I will take a look.</blockquote>

I’ve taken the site out of Maintenance Mode for a bit… Is that enough access?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#560229

Hi

With this new T3 framework, we provide option so that you can configure for the mega menu. Did you try to change the ‘Alignment’ option for that menu item?

You can go to Backend > Extensions > Template manager > select ‘Template Style’ which is being assigned to that menu item > hit the button ‘Megamenu’ and it will direct to Megamenu Configuration section.

[matth72 Friend matth72Join date: February 2015Posts: 6Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#560525

<em>@Saguaros 459695 wrote:</em><blockquote>Did you try to change the ‘Alignment’ option for that menu item?

You can go to Backend > Extensions > Template manager > select ‘Template Style’ which is being assigned to that menu item > hit the button ‘Megamenu’ and it will direct to Megamenu Configuration section.</blockquote>

Yes, of course – that’s the first thing I tried. As I say, the menu either goes full-width of the browser window, or it goes to 1140px width (that I have specified) but anchors to the left edge of the menu item or centered under the menu item – so it’s 1140px wide and goes outside of the bounds of the container.

See image below for example… some bits are greyed out as I signed non-disclosure and have to be very careful:

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#560615

In this case, you can try to use the CSS to change the position of the dropdown menu.

In the megamenu configuration in backend, you can see an option called ‘Extra Class’, just add a class CSS there and style for it

[matth72 Friend matth72Join date: February 2015Posts: 6Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#560650

<em>@Saguaros 460251 wrote:</em><blockquote>In this case, you can try to use the CSS to change the position of the dropdown menu.

In the megamenu configuration in backend, you can see an option called ‘Extra Class’, just add a class CSS there and style for it</blockquote>

Okay, so what you are saying then is that No, there isn’t an option to have the Mega Menu dropdown align within its containing div.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#560762

I’m afraid so, it will align with the screen size which your site is displaying.

The idea here is that we want to bring out the flexibility because someone have few items in the dropdown but other have more items so forcing all items into container div will make it not look good.

[matth72 Friend matth72Join date: February 2015Posts: 6Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#560809

OK I’ve done this myself using some simple CSS to target the correct menu div. For anyone else with this frustrating issue:

Set the specific menu to Justify, and don’t set a width to it.

Add this CSS to wherever you are writing your custom CSS:

.mega-dropdown-inner {
max-width: 1140px;
width: 100%;
margin: 0 auto;
}

2 users say Thank You to matth72 for this useful post

1. icandy_webs
2. andbeyond

[icandy_webs Friend icandy_websJoin date: February 2014Posts: 82Downloads:1Uploads:8 Thanks: 11 Thanked: 12 times in 1 posts]

#562055

Funny I literally was beating my head against a wall because the megamenu wouldn’t stay in it’s containing div as well. Thank you so much for your help!

[matth72 Friend matth72Join date: February 2015Posts: 6Downloads:0Uploads:1 Thanked: 2 times in 1 posts]

#562224

Awesome, glad my solution helped someone else!

(I hate it when people reply to their own threads with “Don’t worry I fixed it” and never say how!)

[Author]

Posts