[Resolved] Off-canvas Menu Slide – Background Color, Sub-menu items font size, Search icon

[Alexandra]

Hi there!
I’ve chosen the Slide style for the Off-Canvas Menu and I’m trying to style it but I could use some help.
You can see it here: https://alex.bandiwork.dev/

1. How can I set a smaller font size just for the Sub-menu items?
2. I added the Search widget, but I would actually like to have only the Search icon in the Off-canvas Menu. Is that possible? Example: https://sitkatheme.com/minimal

Thank you so much!
Alexandra

[David]

Hi there,

1. You can use this CSS to target the off canvas sub menus:

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

2. Its not possible to add the GP Navigation Search Icon inside the Off Canvas.
I could help with some CSS to make the widget fit better ? Let me know

[Alexandra]

Hi, David!
Yes, that would be great! Thank you so much!
The width of the slideout is ok as it is now, but is there any way to style the width and colors of the search widget?
Thank you!

PS. 1 is solved 🙂

[David]

Try this CSS:

.slideout-widget.widget_search form {
    display: flex;
}
.slideout-widget.widget_search form input[type="search"] {
    max-width: 150px;
    /* Optional set color of input field */
    background-color: #000;
    color: #fff;
}

/* Button background color */
.slideout-widget.widget_search form .search-submit {
    background-color: transparent;
}

[Alexandra]

That is awesome! Thank you so much!!
It looks amazing now! 🙂

I do have one more question, though. Because it’s only now that I realize that the background colour I have set in Colors > Off Canvas Panel > Parent Menu Items (dark grey – rgba(10,10,10,0.95)) shows up only on desktop. On Mobile it’s pure black.
Do you have any idea why that is and how I could fix it?
Thank you!

[David]

I am seeing the same color on both desktop and mobile – maybe the browser cache needs clearing ?

[Alexandra]

It wasn’t the cache, I realized I actually had it set to black with a little bit of transparency that was showing up on my desktop but, weirdly enough, not on my phone. There was probably something wrong with my phone. I chose a dark grey and now it shows up the same on both mobile and desktop. My apologies!

One last question, please. Is there a way to have my logo at the top of the off canvas slideout? So basically between the Close button and the first item of the Menu (in my case, HOME).
Thank you so much!

[David]

You can use the generate_inside_slideout_navigation hook with either a hook element or a block element to add your image/link.

May need a little CSS to position it where you need, by default it will place it above the menu.

[Alexandra]

Oh, that’s awesome!
Thank you so much! 🙂

[David]

You’re welcome!

[Author]

Posts