Bottom border on Mega menu - custom css

Hey everyone, I’m trying to put a bottom border 1px (#D6D6D6) on the mega menu.
The stack settings give the option for a border - but defaults to border around the whole container.
May make a good future feature request.
I just want a border on the bottom
Can any CSS pros help me out?

Hi. Have you got a url?

1 Like

hang on. I’ll put it on a demo page.

ok, here t’is @TemplateRepo . (nb the menu won’t work)
http://www.jamesdemosite.co.uk/teacher-data-form/

It looks like you have it inside a container?

if you try it now - this is the menu with a Border added from the stack settings 1px in black.
http://www.jamesdemosite.co.uk/teacher-data-form/

OK, so you added that using the default Stacks options on the container or the Mega Menu stack?

1 Like

yes, - this is from the default stacks options. I’ve tried to add CSS to make the border just on the bottom but i cant’ figure at the right class. I was trying to add it to nav-sticky-container
I’m not great with CSS!

OK, click the little + icon to the left of the option to add the border. It’ll now open out to give to give you the option to add top, bottom, left or right.

That work for you?

1 Like

i’m not getting those options:

Scroll right to the top of the settings panel, use the option there. This is the default Stacks options, not the unqiue Foundry Mega Menu ones.

But, as I asked above, is the Mega Menu stack inside a Container stack? If so, you’ll need to add it to the container.

1 Like

ah, ok - I see what you mean - i didn’t think of adding the border there.
I’ve done this, put it in a containier and it works - however the only trouble is that menu is set to stick and when i scroll i’m loosing that bottom border. e.g. : Test Data Input

You cannot achieve what you’re looking to do with a sticky navigation through using settings within the stack. This is due to the way the sticky navigation “sticks” to the top of the browser. You’d need to write your own custom CSS to achieve the design you’re looking for at this time.

1 Like

I’ve just put a Sticky stack on the page with a MM stack inside it. I’ve added the bottom border to the sticky stacks, it apears to the work. Unless you want something else and I’m misunderstanding you?

1 Like

ok, that works! Thank you. Test Data Input
This is what i was trying to achieve. I was hoping i could do with a bit of CSS but this does the job. :slightly_smiling_face: Thanks

Hi Adam, is it worth me submitting this as a feature request? I think the Nav bar stack can do this, but doesn 't have as many options for styling the menu

You could do it via css if you really wanted. Something like this should work.

.sticky_content {
       border-bottom: 1px #424242 solid;
}

But I reckon it’s always best to use stacks settings where possible.

I’m obviously not trying to speak for someone else, but personally, the less settings in a stack the better. As more settings mean slower previews. So where something is easily achievable using what is already there, albeit with a bit of lateral thinking, leave it be! (IMO)

1 Like
1 Like