How to style Vertical Menu in sidebar-l module position?

birdwaves

I'v turned off megamenu so that I can have a vertical menu in sidebar-l. (Is megamenu able to be vertical?) The site I am working on was upgraded from Joomla 3. Now on Joomla 4. The menu used to be styled using "Nav-pills". So now all my custom CSS code is broken. Is there a way to continue using my styles? In the menu module in the advanced tab, instead of "Menu Class Suffix" the field is labeled "Menu Class". This field was empty. So I tried putting in what I had before: " nav-pills nav-collapse collapse". And the menu disappeared entirely on the frontend. Is there a way to get my Nav-Pills styling woking in this template? The Joomla 3 template was based on Protostar. thanks!

dominic

Hi birdwaves,
Could you send me the site URL and screenshot for further checking?

birdwaves

dominic

The site is on a local development server. So I took some screenshots and notated them. Can you tell anything from what I've given you?

Thanks for your help.

birdwaves

I did some more experimenting, and discovered that by deleting what I put into the Menu Class field and typing it back in, that my nav-pills styles started working. But they are clashing with the template's nav-pills styling. But at least making some progress. I think that old bug about needing a leading "space" character before nav-pills is happening again.

dominic

Hi birdwaves,
You can add the following CSS code to your site:

.custom-menu-l .nav-item.dropdown.parent .dropdown-menu.show {
  position: absolute;
  right: -170%;
  left: auto;
  margin: 0;
}
.custom-menu-l .nav-item.dropdown.parent .dropdown-menu.show a::before {
  display: none !important;
}

birdwaves

dominic

So then I'd simply change the Menu Class in the Menu Module advanced tab from "Nav-Pills" to "custom-menu-l"? This saves me a lot of overrides, right? Can you explain "right: -170%;"? Why?

Also, there are a lot of "nav-list" and "nav-item" styles. How could I override them as gracefully?

And... Thank You!

dominic

Hi birdwaves,
You can open the menu module you want to customize and add the custom-menu-l class to the Module class in the Advanced tab.

when you see right: -170%; it means the element is being positioned in such a way that its right edge is moved to 170% of its parent container's width to the left of the parent container's right edge.

birdwaves

dominic

I removed from Menu Class, and added to Module Class. I looked at it, and decided to put custom-menu-l in both fields. I'm close, but still needing to override nav-list and nav-item I think. padding left is weird.

You can see what I mean here: https://dev.laurawetzler.com
The original Joomla 3 site is here: laurawetzler.com

Thanks for your help!

dominic

Hi birdwaves,
You can add this CSS code to your site:

.custom-menu-l .nav-item a.nav-link {
    padding: 10px 15px;
}

And change the right: -170%; to right: -120%;

NOTE: The original Joomla 3 site not work, I can not access: laurawetzler.com