Topbar submenu problem

(Joost Gravendeel) #1

I was asked to recreate the following site:
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?

(Rob Beattie) #2

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


(Robert Ziebol 🖖🏼) #3

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

(Jannis from inStacks Software) #4

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

(Andrew Tavernor) #5

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.

(Joost Gravendeel) #6

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

(scott williams) #7

@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…

(Lisa Sandler) #8

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

(Joost Gravendeel) #9

Nope no extra space

Kind regards

Joost Gravendeel

(Andrew Tavernor) #10

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{

(Joost Gravendeel) #11

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

Kind regards

Joost Gravendeel

(Lisa Sandler) #12

Looks fine published to me… on Safari desktop.

(Joost Gravendeel) #13

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

Kind regards

Joost Gravendeel

(Joost Gravendeel) #14

btw not a commercial assignment…

Kind regards

Joost Gravendeel

(Lisa Sandler) #15

that’s just a screenshot of your page.

(Joost Gravendeel) #16

Ah ok, not the smartest kid in the class…

Kind regards

Joost Gravendeel

(Lisa Sandler) #17

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.

(scott williams) #18

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

(Lisa Sandler) #19

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

(Joost Gravendeel) #20

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

Kind regards

Joost Gravendeel