Simple Dropdown Menu without background etc

I have put in a request to 1LD to offer multiple tier dropdowns as this currently is NOT a feature - really sad as otherwise a great nav stack

Top bar supports top level headers (non clickable). For this and other Top bar tips go to: Home - Weaver's Space Community

There’s also the ‘No Link’ stack from Marathia which works very well in most instances: can get it as part of the menupilator stack or possible on it’s own: https://rapidweaver.marathia.com/stacks/Menupilator/

1 Like

Read the page that @manofdogz gave you a link to. it needs to be a non-stacks page (offsite works best)

This should underline & bold current page selection:
.top-bar-section ul li.active a {
font-weight: bold;
border-bottom: 2px solid #000;
}

Here is a sample using Big White duck stacks…you can do almost anything…
http://www.ibize.com/2buttons/

Hi Scott. Thanks for the code.

Thats how it looks. :wink: Not really, huh? Do you know a code to just underline the word? This one makes a border.

THANKS SO MUCH!
Marcel

Ok, that worked now. THANKS A LOT LJ.

Now just the problem with the background behind the dropdown links I want the active link to be underlined. :wink: But only the word. No border around the field.

Any ideas?

THANKS SO MUCH!

text-decoration: underline; instead of border

https://www.w3schools.com/cssref/

Found it, thanks a lot!
But where do I put it? In the regular CSS field? And how does it know to only underline the active menu word? :wink:

If I just paste it in the CSS field, it underlines my header word.

THANKS A LOT!

in the CSS I already gave you.
Put it in sitewide code CSS area & republish all files, assuming you want it on every page.

Hmmm… Makes sense. But:

Like this?

.top-bar-section ul li.active a
{
text-decoration: underline;
text-decoration-color: grey;
}

did you try it? You need to put a little effort in also :wink:

1 Like

Haha.

I DIIIID!! :smiley:

But somehow the code doesn’t work. I combined the 2. Is that correct? Or do I post them both?
I am everything but a coding expert!! :confused:

.top-bar-section ul li.active a {
text-decoration: underline;
text-decoration-color: red;
}

give a url to your page or test page

http://thevicgroup.com

THANK YOU!

Try this (style to your liking)

.top-bar-section ul li.active>a{
text-decoration:underline !important;
text-decoration-color:red !important;
}

AMAZING SCOTT!! You are the man! That works beautifully! :))

ONE MORE LITTLE THING I am sure you got an idea.

  • I like to remove the background from the actual dropdown field.
  • And I also like to have the actual Menu Sections a bit closer together, they are pretty wide.

Heeeeeelp please! :wink:

THANKS SO MUCH!
Marcel

  1. Are you talking about the hover coloe? - set it to 0% opacity in the top bar ui
  2. Keep in mind this changes by browser window width, you are already wrapping in some browser width (you need to adjust the mobile breakpoint to correct this) open the page in your browser and start dragging the window edge to make it narrower & you will see the menu “Wrap”.

First problem with the background is solved I think :slight_smile:

Not sure if I explained my second question right. See screenshot. I like to have the sub-menus closer together. Is that possible? Also it would be great if the menu wouldn’t have such a big border section, since year it breaks in like iPad size and looks horrible. :-/
There must be settings for that, right?

Thanks a lot.

For Top Bar Sub Nav height: - check ‘Custom Sizing’ then you have the option to set height for both main menu bar and sub menu items separately - If I have understood you correctly?

Untitled_and_Notes

2 Likes

No that’s not what I asked!
I need the sub-nav aligned left with the SERVICES menu as you can see in the screenshot.