[Resolved] Mobile menu style

[Robert]

I want to do something nicer with the mobile menu icon: https://imgur.com/a/rAzuPSt
Can you please help me style this? I can’t find a way to increase the icons or do anything to them in the desktop or mobile version.

[David]

Hi there,

go to Customizer > Layout > Primary Navigation, switch to Mobile View and edit the Menu Item Width to increase the space between the icons.

then in Typography you can edit the font size for the primary navigation again just for mobile. This will change the size of the icons

[Robert]

Hello, again David,

Not so many things to customize there. Can you change the hamburger menu icon? Change the search field transparency? Modify the drop-down menu and add some lines between the links?

Also, I have meant to ask you this for a long time: Is there any way to have a radial gradient in a container? When I check “Use gradient” in the Backgrounds tab, there is no option for radial so it goes implicit on the linear one.

Thanks!

[David]

The Customizer can provide Color and Typography styles.
In both those settings you will see options for the Primary Menu and the Primary Sub menus.
You will also see color options for Search Field which includes Background that contain a transparent color.

Changing Icons requires PHP this article explains:

https://docs.generatepress.com/article/generate_svg_icon_element/

Adding lines between links takes a little CSS. If i can see a link to the site and you tell me where the lines should be then i can assist with that.

Gradients in the GenerateBlocks plugin, today – they only do Linear. If you want Radial then its gonna require CSS.

[Robert]

Thanks again! I managed to make it look better now.

Can you please tell me how can I customize the page for no results found in the search? So if someone types something in the search field and there are no results on the website then a page is shown with “Nothing found” but that page brings my footer way up to the top and it looks bad.

Is there a way to stick the custom footer section to the bottom of the page? For example, as in the above explanation here is a link that will show my footer wrong when searching for something that’s not found on the website: https://retetediabetici.ro/?s=generatepress

And the last thing for today 🙂 and you have no idea how grateful I am for your help: is there a way to duplicate Elements pages I’ve created? For example, I’ve created a global footer but for a special page, I need to change the color or something. Instead of doing the whole thing again I just want to duplicate the element and just change the color and rename the element.

Kind regards,
Robert

[David]

Awesome – glad to hear that.
Can you raise a new topic for each unrelated question, as it means we can set this to Resolved ( which is nice for us ) and it makes it a lot easier for you to review any topics you have in your profile as each Topic title will be relevant to the question 🙂

[Robert]

Sure

[David]

Thanks

[Author]

Posts