[Resolved] Navigation menu styling glitch

[Vera]

A few of my main and secondary navigation bars have multi-level menu items, like this:

CLASS MATERIALS

• School & Course Name 1

• Submenu 1
• Submenu 2
• Submenu 3

• School & Course Name 2

• Submenu 1
• Submenu 2
• Submenu 3

• School & Course Name 3

• Submenu 1
• Submenu 2
• Submenu 3

#1: I would like the submenu items to me indented more than the menu items so I used CSS to add padding to the ul li li li for both navigation bars. I got most of what I wanted with this CSS:

#site-navigation ul li li li,
#secondary-navigation ul li li li {
   padding-left: 20px;
   margin-left: 0px;
   width: 180px;
   background-color: #777777;
}

…except that I want the color to fill the full width of the menu. Can you tell me what I’m missing? I’m sure it can be done, but apparently not by me! I’m a hack. I have to look up how to do most things at w3schools.com.

#2: I would like ONLY the CLASS MATERIALS menu (in my top menubar) to have a dynamic width for the dropdown based on the length of the longest course name in the list (“School & Course Name” 1-3). The course titles match the page title and will change each semester. Some of the names can get very long which causes the text to conflict with the dropdown arrow. I tried assigning a “dynamic-menu-width” class to just that menu but I can’t come up with the correct rule. I can only seem to get it to affect the name in the menubar and that isn’t at all what I want. I’m at a loss how to accomplish this or if it’s even possible.

If it can’t be made to adjust dynamically (without using JS!), I’m willing to update the width of the menu in CSS if it could only affect that one menu.

Thank you in advance!

[David]

Hi there,

1. Try this CSS:

#site-navigation ul li li li a, 
#secondary-navigation ul li li li a {
    padding-left: 40px;
}

#site-navigation ul li li li, 
#secondary-navigation ul li li li {
    background-color: #777777;
}

2. Real tough to do it dynamically with the sub menus. But you can add this CSS:

.secondary-navigation ul li.fixed-width-menu ul {
    width: 240px;
}

Then add the CSS Class of fixed-width-menu to that menu item. Heres how:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Vera]

That fixed the first menu issue — thank you! Menus always throw me.

A few hours after submitting the post, my client decided he did not want any sub-submenus below the submenus that I was hoping could adjust dynamically the width of the label. After I removed the sub-submenus, I found the long submenu labels wrapped to two lines. This works fine so I will leave that menu’s width as is so it matches the others. I will still keep your solution for future reference.

THANK YOU!

[David]

Glad to be of help 🙂

[Author]

Posts