Topbar submenu problem

I was asked to recreate the following site: www.exclusivescandinavia.no
Trying to build it with foundation topbar and TBS. Some small issues I keep encountering. The extra space at the end of the menu item with submenu will not disappear, although I switched off the dropdown indicator. And I’m having trouble withe dropdown menu, how do I configure it to show all items, and have a big padding?

Have you got any content on that page? I don’t think the sub-menu will display if there’s nothing on the page.

Rob

1 Like

Rob is correct, if there is no content below then the menus will not show.

Navigation items will be created in all cases, if content is on the page or not.

But they will not show in an absolute positioned dropdown if the page body is not as tall as the dropdown!

I’m sure that @robbeattie is correct and the page just needs some content.

1 Like

Weel done, you were right, the page needed content. How simple can it be? The other two questions remain however. How do I get the padding right and why can I get not rid of the extra spacing?

Kind regards

Joost Gravendeel

@tav is the topbar expert, but I think you can target that padding with this:
.top-bar-section .has-dropdown > a {
padding-right: 0px !important;
}

I actually thought it went away if you turned the submenu indicators off, humm…

There’s no extra space in your page title, is there? Just a thought.

Nope no extra space

Kind regards

Joost Gravendeel

1 Like

The code that @swilliam has given is in essence correct to get rid of the space, the problem is that it will not over ride the padding added by the TopBar stack which also has an !important in its code.

In order to over ride this you will need the id of your particular TopBar stack on the page to make it more specific. You can find this by using a browser inspector and looking for the #stacks_in.... part.

If you don’t know how to do this then just publish your page and someone will be able to find it for you from a url. Your code will then look like the following just with your own stacks_in id

#stacks_in_3135_page0 .top-bar-wrapper:not(.submenuIndicator) .top-bar-section .has-dropdown>a{
padding-right:0px!important;
}
1 Like

Thx so far, I’ll have a look if I can follow these suggestions.

Kind regards

Joost Gravendeel

Looks fine published to me… on Safari desktop.

Great! You wouldn’t be able to send me the file, if I dare ask?

Kind regards

Joost Gravendeel

btw not a commercial assignment…

Kind regards

Joost Gravendeel

that’s just a screenshot of your page.

Ah ok, not the smartest kid in the class…

Kind regards

Joost Gravendeel

1 Like

Well, I couldn’t possibly have your file unless you gave it to me :slight_smile:
I don’t know what you’re referring to. I’ve viewed your site on Chrome, Safari and Firefox and the menu looks fine.

1 Like

@LsPhoto Lisa, that link above is the site he needs to re-create. It doesn’t look like it’s the foundation site.

2 Likes

oh. Sorry, I misunderstood. Well, it’s hard to help you unless you publish and screenshot your settings.

No that the one I was asked to copy (by the owner). I only build a site for myself (www.malumido.com). She needs some extra’s, so I said that would have a look, but it has to look the same…

Kind regards

Joost Gravendeel

1 Like