Customize the widget menu

Hi @davidovic123 ,

I tried using the Navigation Menu widget, but didn’t have the same result.

Can you share here the link to that page to take a closer look?

Best,
Chito

Hi @chitocamacho ,

Actually, the site is on a local server under developpement.

I created a secondary menu and implemented it in the navigation menu widget.
like here: https://www.screencast.com/t/bPcchD4htS

Please find here an HTML file, so you can inspect a page source:
https://filetransfer.io/data-package/KCKgh03d#link

If there’s another way to do this differently and more efficiently, let me know.

Thanks,

• This reply was modified 1 year, 6 months ago by davidovic123.

Hi @davidovic123 ,

Thanks for the HTML file.

The Navigation Menu widget does not have customization settings. You can use this custom CSS:

.primary-sidebar .collapse-sub-navigation .sub-menu .drawer-nav-drop-wrap>a{
padding-top:0.3em !important;
padding-bottom: 0.3em !important;
}
.primary-sidebar .collapse-sub-navigation ul.menu li a{
border-bottom: none
}
.primary-sidebar .collapse-sub-navigation ul.menu .drawer-nav-drop-wrap .drawer-sub-toggle{
border: none
}

Let me know if you need further assistance.

Best,
Chito

Hi @chitocamacho ,

The line height part of the code doesn’t seem to work:

.primary-sidebar .collapse-sub-navigation .sub-menu .drawer-nav-drop-wrap>a{
padding-top:0.3em !important;
padding-bottom: 0.3em !important;
}

See the screenshot:
https://www.screencast.com/t/sTsWixZdIHN

How can this code be corrected so that line heights can be set both:

• for items in the dropdown menu;
• and for menu lines in general?

Thanks a lot,

• This reply was modified 1 year, 6 months ago by davidovic123.

Hey @davidovic123 ,

Apologies for that. It’s weird the HTML structures are different on my test site and yours, but we’re using the same widget.

Please replace that code you referenced with this:

.primary-sidebar .collapse-sub-navigation .sub-menu a{
padding-top:0.3em !important;
padding-bottom: 0.3em !important;
}

It should work now – see screenshot: https://share.getcloudapp.com/jku615k2

To apply the same code to all Navigation Widget dropdown items, just remove the .primary-sidebar in the code. However, please note that the code will only work if you have the same settings (e.g., Collapsed sub menu items).

Let me know if you need further assistance.

Best,
Chito

Hi @chitocamacho ,

The recent code works well as is. But I tried “line-height” and it works great.
Thanks a lot for your help.
You’re awesome.

Hi @davidovic123 ,

Thanks for writing back. Please note that reducing the line height can sometimes be a problem, especially if menu item labels are long and get into multiple lines. Another scenario would be on narrow screens (e.g., on mobile) and texts are displayed in multiple lines. Here’s an example: https://share.getcloudapp.com/GGuyv4kR

Anyway, that’s just an example, and it’s still up to you on how you do the customization.

If you have any concerns, just let me know and I’ll be around.

Best,
Chito