Mega menu padding


#1

Hello again,

Is there a way to set different padding for the child navigation items (subnavigation) for the different breakpoints? Having a hard time finding a happy medium between desktop and mobile.

Thanks in advance


#2

No, that is not a feature of the stack.


#3

Is there a way of controlling the padding between the items in a MegaMenu in the navbar?

On a smaller device when a smaller font is used there is a large amount of space between the top level items, which wastes a lot of space. It would be very nice to be able to specify the padding between the menus.


#4

That isn’t a feature of the stack. Currently the stack uses a fixed padding for the navigation items. I will note this as a possible future feature.


#5

This is off-topic for what’s been asked but I noticed that adding general padding kinda gives cool overlap look for menubar. Especially with blur enabled on and background image it gives interesting possibilities. (Only wish I could change the color of ‘overlap’ menubar.)


#6

@elixirgraphics There is also some padding on the side of the drop down menu when set to be full width. It would be useful if this could be removed with an option. If the Mega menu BG and page BG are different colours then it doesn’t look right IMHO.

Also, the Mega menu is a really powerful and unique solution but I think it could be used a lot more if there was a way to control when the Mega Menus collapsed to the mobile menus. Currently there is no way to change this behaviour and this has stopped be from using it a few times.


#7

@elixirgraphics Also, I notice that if you add a button to Mega Menu then a full width dropdown does not extend past the button.

I’m still struggling to find a way to remove the left and right padding thats preventing the dropdown fullscreen from going page edge to edge.

I noticed this in the code:
Screen%20Shot%2063

And wondered if the .row .row was a sign of something adrift or me just being able to track down the pesky padding.


#8

I don’t seem to be running into that problem. Perhaps I’m misunderstanding though. But here’s what I get at the mobile breakpoint when adding a drop down and setting it to “Full Width” to the navigation. Excuse the horrid colors, just done for highlighting the different sections:


#9

The issue is the Drop Down when it is set to full width.

Here is a simple fresh project file which I can send you if it helps.

The Drop down has some padding outside the drop down and the contents of the drop down appears to have a negative left margin


#10

@elixirgraphics Update. The mobile padding issue is not actually as I reported unless you fail to select Foundry as the theme. Looks like someone had left the Master Theme selected on my system:)

Anyway, there still is an issue so I will send over my file as this will best illustrate the issue.

Looks like a negative left and right margin is being applied to the Drop down contents when drop downs are set to full width.


#11

I’ll take a look at the project file you sent over in just a little while when I am freed up. You screenshot doesn’t seem to reflect what you described in your post…

I’m not seeing a button in your screenshot. Did you remove that? Is it still an issue? Now that you’ve selected the proper theme is the only problem you’re seeing related to the Full Width drop down not extending all the way to the edges?


#12

Yes I still see that behaviour - see below


#13

Thanks. I will have a look as soon as I can.


#14

Just opened your project file – heads up, you still don’t have the correct theme selected in that project.


#15

So now that I look at it, the button being added is doing what I would expect to the Full Width drop down. The reason being is this – The drop down and all of its parents are contained in a column on the left-hand side of the navigation bar, and the button is in its own column on the right-hand side. The drop down will not span across the full-width in this case because it cannot escape the column it is in.

Will go back to looking at the drop down in the normal capacity now.


#16

Sorry, but I must have sent you an early version. (Pressure of juggling too many balls).

However, the screenshots are with Foundry selected.


#17

See the above post.


#18

So there’s some weird interactions going on because honestly it wasn’t intended to be used full width without padding. It comes from having to strip out a container class for the full width mode. This is to get it to extend outward past the container limitations. Looks like I forgot to compensate in that corner case for the padding that would be lost by removing the container. I’ll make the adjustment for this corner case, adding back in the 15px of padding on the left and right that is now missing to overcome the missing container class.


#19

Thanks. It will look really slick when it goes full width.


#20

Note there will be a small space on either side, as seen here, as it accounts for drop shadow, and some other formatting as well as the fact the the drop down matches the full width of the nav bar’s inner content. This is the intended design styling:

Nav items set to fluid:

Nav items inner container set to 900px: