Dropdown menu alignment and color

:sunglasses:
Good.

1 Like

could you DM me the project you have the alignment issue in as Im not able the replicate that, menus look fine with drop downs at my end.

Yes Sir.
Done.

1 Like

Great, Done!

1 Like

Got iT! Thanx @Norm! :grinning:

But how do I style the main menu, not the dropdown? I want to change the color on idle and hover and the font size. For now I did this by creating a class called navbar-nav li a it works but the alignment problem occures. is that the correct way?

Yes that’s correct.

Hey @wolfje I’ve taken a look at your file and I can see what the problem is. Because you have changed your text size in the navigation menu (in the file you sent) this is causing the padding applied to the menu item to no longer create the desired centered look. So now you have changed the text size for the menu you also need to to change the padding size for the dropdown menu.

Open menu manager and add a new class .nav > li > .dropdown a when asked if you would like to keep the spaces in the class name, select yes. This will now create a new subclass that will let you tweak the padding for drop downs that appear within the navigation menu.

The issue with the current .nav > li > .dropdown a is that it’s padding is set at the top and bottom to 14px which works great for a font size of 16px but since you have changed the font size to 22px you will need to adjust the top and bottom padding of the .nav > li > .dropdown a to 10px. You should then see the menu item is centered correctly.

1 Like

Hi @Norm, sorry for the late reply as I was on vacation :slight_smile:

I figured it must have something to do with the padding but couldn’t find the right class to fix it. Tried your solution and it worked perfectly.

Thanx for your help, keep up the good work!

1 Like

My header menu has a dark background and viewing the menu in a browser shows the same color background as chosen in a class. The dropdown menu remains white color no matter what I try.

So I added a subclass as explained above to the menu bar .my-menu. When I switch in the source bar from the home menu to the dropdown menu and add the subclass it automatically also shows up in the home menu again. They kept staying linked and tried all kind of variations. Any idea?
I think I do something wrong with the subclass addition process here.
Is there a clear instruction how to?
Thanks.

what is your goal? To make the dropdown menu background colour black?

It would be very helpful for everyone here to see a list of all available classes as “.nav > li > .dropdown a” and many others we have to identify manually and description each of them, wouldn’t it?

1 Like

Not sure if this helps with that class list you asked about.

Shoot me @Norm if it lists more that Blocs uses.

2 Likes

Yes, that is my goal.

I get a 508 error message “Resource Limit Is Reached”.

You will need to target the dropdown object within the menu. Have you tried .mymenu .dropdown as the class, then setting the background colour to black?

Thank you got it, so easy, sometimes one thinks to complicated :slight_smile:

1 Like

Odd, just tested the link as it appears here and it worked for me.

I have the same issue as above changed the menu background to white successfully, however anytime I add a new item to my menu it doesn’t take on the properties I have previously set (font colour), items I that were there when I initially created the subclass work, however new items don’t. (blocks 2.4 beta 8)

You wrote “So add a class to your menu directly my-menu” …
At which level in the layer tree? Nav Toggle? Nav Container? List?

" when asked if you would like to keep the spaces in the class name, select yes ."

This works, but if you try to change the names after the style has been created,
Blocs adds dashes and there’s nothing you can do to get rid of them …