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

Home Forums Support Off-canvas Menu Slide – Background Color, Sub-menu items font size, Search icon

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1514775
    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

    #1514843
    David
    Staff
    Customer Support

    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

    #1515580
    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 πŸ™‚

    #1515856
    David
    Staff
    Customer Support

    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;
    }
    #1516039
    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!

    #1516380
    David
    Staff
    Customer Support

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

    #1517106
    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!

    #1517311
    David
    Staff
    Customer Support

    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.

    #1517530
    Alexandra

    Oh, that’s awesome!
    Thank you so much! πŸ™‚

    #1517601
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.