Dropdown menu alignment and color

I have two dropdown menus next to two normal menu buttons. If I change the text size in the class manager the menu items are not aligned properly anymore. This used to be an issue but I was hoping it had been fixed.

Also, how do I change the white background of the dropdown menu? Can’t find a proper explanation in the forum on this.

Any help appreciated.

1 Like

Good questions. I too would like to know how to color submenus. I can click the menu, create a class and change the background color of the main menubar, but I cannot find a way to separately color the submenu background. I assume that is a feature which would need to be added to Blocs.

Same here.

Okay, I managed to color the dropdown menu. What I did is select the dropdown menu itself, not the link that activates the dropdown, and add a class to the dropdown menu directly. Now I can change the background color of the menu, but…

It works fine in a desktop browser but not on my iPad, there I still get the same white background color.

@Norm: whats with the alignment question? We had a conversation about this in Blocs vers.1, I thought it was fixed?

Well, this workaround only works if you set the data feed for the menu to none, once you put it back to primary menu the class get’s deleted…

You can style dropdown menus using a subclass. So add a class to your menu directly my-menu, now open the Class Manager and add a new class .my-menu .dropdown-menu

Basically what you are doing here is targeting the dropdown menu within your menu, you can then style it. Lets say you now want to style the links with the dropdown menu thats also nested within the navigation, you would do that by adding a class via the Class Manager like so .my-menu .dropdown-menu a . You will notice the additional a this in code terms refers to links.

So with this you are saying, “hey browser, look at my-menu and find the dropdown-menu within it and then apply a style to the link within that dropdown”. Its a common mistake to think the navigation is one element, its multiple elements all nested within each other.

Important note, when you create these subclass take care to keep the spaces in the names when blocs asks if you want them kept.

1 Like

Thans @Norm, I’ll give it a try asap

Anything on the alignment issue?

thats a bug Im working on.

1 Like

: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