Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#194218

I’m using a more advanced mega menu than I typically need — and so far it’s pretty cool.

Unfortunately, I need to cram a LOT of menu options into a single wide drop-down.

I’ve got my columns set up the way I want them, but on iPads and other portrait-mode tablets, the menu is now greater than the width of the screen.

I think I can make it fit, IF I can find a way to greatly reduce the padding/margins between columns on the mega menu for that media query.

Unfortunately, I’m having far more difficulty than I should. Please see the attached diagram to see specifically what I’m trying to do. I’d LIKE to get the whole menu not to go beyond the right edge of the site, or as close as possible to it, so that all menu items are readable. I’ve already moved the whole drop-down container over to the left quite a bit. Shaving down the wasted space between columns should do the trick.

Your help with is is, as always, greatly appreciated.

Thank you.

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#520521

The padding of dropdown columns on your Mitius is related to the override padding inside your custom.css file and the span margin of Bootstrap we integrated inside our T3 plugin. In this case, you can try to put below override css rules into your custom.css file:

.row-fluid {
margin-left: 2.7173913043478%;
}

within @media (max-width: 979px) and (min-width: 768px)

Then change the margin value until you get perfect.

1 user says Thank You to phong nam for this useful post

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#520696

Also, if there’s a CSS way to move the Artist drop-down container left, so it can be no wider than the width of the page, without affecting the other menu item drop-downs, that would be wonderful. But I’m not sure how that would be accomplished, since it’s neither the first or last menu item, which have specialized classes.

Is there a simple way to assign it a menu item class suffix and adjust it that way? Hope so.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#520716

@synapsis: For the 1st question, you can try to follow my suggestion above. And in order to align left the dropdown menu, you can use the Mega Menu inside Template style to align the dropdown menu of each menu item you want.

---

Attachments:

1. 

1 user says Thank You to phong nam for this useful post

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#522285

@leo Burnetts —

Thanks so much for that. It’s helping a great deal. I’m still not 100% satisfied, but it’s much closer.

If you look at the site now, you’ll see that I’m getting there, but there’s still a lot of white space at the right edge of the Artist drop-down that I can’t seem to eliminate. By narrowing the gutters between columns, I was able to narrow the main drop down from 800px to 740px before lines started wrapping. But it’s still just wide enough to make the site side-scroll in portrait mode on tablets. I’d like the menu to fit completely within the width of the site container.

Here’s a screen-capture to show you what I mean:

It’s so close, I hope you’ll help me figure out this final piece.

I’ve tried creating a class in the media section of my custom.css for portrait-mode tablets (.last_column) and applying it to the 4th column in the Megamenu editor, in an attempt to set the right margin and padding to 0px, but that doesn’t appear to have worked at all. So perhaps the margin/padding is being added to the main container — but narrowing the main container below 740px makes the columns start to line-wrap, which I’m also trying to avoid. The columns don’t vary in width at all, so I’m not sure why they aren’t spread more evenly across the drop-down, unless there’s margin being applied to the last column that shouldn’t be?

Again, thanks for any assistance you (or anyone else) can provide.

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#522321

Hi synapsis,

You can try to put below override css rules into custom.css file you have created:

@media (max-width: 979px) and (min-width: 768px) {
div.nav-child.dropdown-menu.mega-dropdown-menu {
max-width: 660px !important;
}

.t3-megamenu .nav .row-fluid .span3 {
width: 24.961957%;
}
}

The dropdown of Artist menu item will display better without the right white padding. Do not forget to inform me how it goes.

---

Attachments:

1. 

1 user says Thank You to phong nam for this useful post

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#522766

Ah-ha! Thank you! That’s perfect.

[Author]

Posts