Site logo

Archived topic

custom off-canvas menu links

5 replies · Started by Raul on February 2, 2022

Viewing posts 1–6 of 6

Hi
David and team helped me with an Off-Canvas menu that opens as you can see on the website from the private box.
Now, I want to know how can I edit the elements from that Off Canvas panel. So, what are the CSS class names for the links and sub-links (desktop and mobile) so I can edit the paddings, margins, background color etc.

Hi there,

can you explain some of the changes you want to make ? If you have a mockup then that would be great.
I can then provide you the CSS.

Hi David,

For the Off Canvas menu, I want
1) to add some paddings for the menu items (10px 0 10px 0)
2) remove the background of the submenu (#fff)
3) add some left padding to the submenu (10px)
4) change the font-size of the submenu items, if possible, to make them a little smaller than the menu (-2px)

I see that I can add widgets and blocks to the Off Canvas menu, so I can edit those extra myself. But I don't know why it is aligned right.
5*) So, have a full width for the Off Canvas panel - see my "full width" container

Lets deal with the Widgets aligned right issue first.
You have this CSS already:

.main-navigation .inside-navigation {
    flex-direction: row-reverse;
}

change it to:

.main-navigation:not(.slideout-navigation) .inside-navigation {
    flex-direction: row-reverse;
}

Other CSS seltors:

1. to add some paddings for the menu items

.slideout-navigation.main-navigation .main-nav ul li a {
    /* padding values here */
}

2. remove the background of the submenu - this you can change in Customizer > Colors > Off Canvas

3. add some left padding to the submenu (10px)

.slideout-navigation.main-navigation .main-nav ul ul {
    padding-left: 10px;
}

4. change the font-size of the submenu item

.slideout-navigation.main-navigation .main-nav ul ul li a {
    font-size: 18px;
}

Thank you very, very much. Now, I have everything I need :)
Just one thing: for Customizer > Colors > Off Canvas, there was no color there and 'default' was that grey. So, I had to put #fff.

Yeah it would have been inheritting the color for the Primary Navigation > Colors or the Theme Defaults.
Glad to be of help!

This archived topic is closed to new replies.