Identifiers on slide out menu

Hi there,

You could create menus in "Appearance > Menus".

Then add Navigation Menu widgets to the Slideout Navigation widget area in "Appearance > Widgets".

Let me know :)

Hi Tom,

Close! But as you can see by the included image, the links are bunched together and not on individual lines. Also the links and titles are aligned to the right. Is there anyway to:

1) align the text the left while keeping the slider on the right?
2) change the font size of the title and links (they're new menus, only assigned to the slideout via widgets so the customizer doesn't seem to work)
3) break the links apart so they're separate... one below the other?
4) change the text color/background of the title? It seems to default to the color black.

I know I'm asking a lot and if it's outside of the scope of support I understand. I appreciate your time either way. :)

I can definitely help with that! Can you link me to your site?

Hi Tom,

I added the link to the site in the original post for admin.

Thanks for taking a look!

Try something like this:

#generate-slideout-menu {
    text-align: left;
}

#generate-slideout-menu .menu li {
    display: block;
}

.slideout-navigation .widget-title {
    margin-bottom: 10px;
}

.slideout-widget .menu li a {
    display:  block;
    padding: 5px 10px;
    background: #11bec7;
    color: #fff;
}

.slideout-widget .menu li a:hover {
    background: #fff;
    color: #11bec7;
}

Adjust the colors as needed :)

This was so helpful, thank you! I played around with the settings and got it looking pretty close to what I wanted!

If I may, a couple more questions came up: How would I go about editing the Navigation Search Widget? More specifically changing the shape/size of the entry box and altering the text inside of it (instead of saying Search... changing to custom text)?

Lastly, is it possible to remove the Search Button? (reason I ask is because I will only display it on mobile where I don't think it's necessary).

Many thanks... I totally could not have accomplished what I have with the site without your help!

I just realized it’s a bit of a different question than the original.

Should I open another thread to ask instead of piggy backing on this one?

You can change the placeholder text like this:

add_filter( 'generate_search_placeholder', function() {
    return 'Your text here';
} );

Removing the button can be done with some CSS:

.slideout-widget .search-submit {
    display: none;
}

What about the shape/size are you wanting to change?

I basically want the search field to be less round, have no border and span the same length across the slideout menu as the background colour behind “pages” and “categories”

I imagine it would be easy with some CSS, I just don’t know exactly where to put it...

Thank you for bearing with my newbie-ness. Your patience is so greatly appreciated.

(I should probably take a course in php and css, gets kind of fun playing around lol)

I ended up playing around and figured out how to make it the same length and removed the border!! :)

The only two things about it I can't figure out now is how to change the roundness of the search-field and the size of the text in the field.

It looks like you got the roundness figured out as well :)

To increase the font size, try this:

.slideout-widget .search-field {
    font-size: 20px;
}

Ah, that worked for the font. :)

Unfortunately I didn't figure out the roundness... border-radius with lower px does not seem to change it (trying to make it more square).

I also was reading your doc @ https://docs.generatepress.com/article/navigation-search/
to move the search function from primary to secondary navigation. It works great, but there are two magnifying icons on the secondary navigation. Any idea why?

Here's what I'm seeing: https://www.screencast.com/t/pbpcfNnb

Looks like 1px of border-radius is applied.

I just updated the code on that page - can you give it another shot?

Hi Tom,

The new code works, thank you!

As for the roundness, that’s weird.. on my iPhone and iPad it is still very much round.

It’s as if iOS devices completely ignore border-radius or something...