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
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.
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
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;
}
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
Well, I couldn’t possibly have your file unless you gave it to me
I don’t know what you’re referring to. I’ve viewed your site on Chrome, Safari and Firefox and the menu looks fine.
@LsPhoto Lisa, that link above is the site he needs to re-create. It doesn’t look like it’s the foundation site.
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