Topbar submenu problem

Of course, I’m sorry about that

Kind regards

Joost Gravendeel

Any chance you can publish a page? It’s hard to help without being able to see the code and see what’s happening. It might just be in preview…

@Joe It is just that selector that I posted about above that you need to resolve. I’m guessing that using the inspector to find it is probably not what you are used to so why not just send me your project file and I will insert the CSS for you. Just zip it up(and preferably send me a link to it on DropBox or other cloud sharing service. If the file is not too large you can email it directly.
Any how just send it to
support at bigwhiteduck dot com

3 Likes

http://joost.degravendeeltjes.nl/index.html

Kind regards

Joost Gravendeel

Kind regards

Joost Gravendeel

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

Should do it

2 Likes

I knew if you posted a link one of the “code” guys could help. I’m not a programmer :slight_smile:

Thanks @swilliam - spot on. @Joe I should add that it will depend where you place this code because of the !important on the TopBar stack code.

We can make the selector just one stage more specific that should make it work everywhere (site-wide CSS or page inspector) - sorry, I should have though of this before. It is just Scotts solution but with the menu-rw class added to the top-bar-section. You may or may not need it but it should be bullet proof.

#stacks_in_p25_n2_page0 .top-bar-wrapper:not(.submenuIndicator) .top-bar-section.menu-rw .has-dropdown>a{
padding-right:0px !important;
}
2 Likes

Thx. Really works! I’m very grateful.

Kind regards

Joost Gravendeel

1 Like

Oi, problem persists on all the non-home pages, no difference where I put the code

Did you paste as plain text?

@joe Paste the code into the site-wide CSS, that way it will apply to every page in your site. You can then delete it from the page inspector where you have it now - that applies only to the page that it is on. You would need to replicate it on every page the same, hence why site-wide is a better choice.

2 Likes

Thats what I did too, and the whole thing is in a partial. Still its only the homepage thats fixed…

Kind regards

Joost Gravendeel

The part with “p25_n2_page0” is only on the home page, that must be why it is not working

Kind regards

Joost Gravendeel

Compared the code, the only difference I noted was

HOME p25_n2_page0

ABOUT p17_n2_page1

I pasted the code in the pages and changed that part: succes…

Great help!

Kind regards

Joost Gravendeel

1 Like

Pfew, that part done. Remains the submenu. The padding will not appear, I put in the biggest border, but its still off (the bottom is less than the rest). And I noticed that the hoover gives an underline, which I don’t like (it goes through the next choice)

You can stop the underlines in the dropdown menu with the following CSS although the overlapping problem is only occurring because of some of your padding changes. There is an Advanced Sizing option in the TBS dropdown settings that allows you to style the padding separately from the main bar items and counteract some of the changes that you have made to the top level items.

.top-bar-section ul ul li a{
	border-bottom:none!important
}

Here is a much easier solution to all these over riding of code problems.

To stop the stack outputting the problematic !important code, lets hide the dropdown indicator manually instead.

Check the Submenu indicator setting in the topbar stack - i.e turn it back to its default ON state.

Remove the CSS that you added originally from the discussions yesterday and just add this instead, it will hide the indicator and remove the padding.

.top-bar-section .has-dropdown>a:after{
	display:none!important
}
.top-bar-wrapper .top-bar .top-bar-section .has-dropdown>a{
	padding-right:0!important
}

Tried it, but does not wok. I think I’ll stick with the found solution. Would be very appreciative if you could look in to the dropdown problem as well.

Kind regards

Joost Gravendeel

The code works for me OK in a test project - the only reason I mentioned it was that I thought you had problems between the different partial pages.

What dropdown problem are you referring to - the underlines or the padding? See my comments 3 points ago