Modify the size of menu icons in mobile display

Hi there,

you should simply change the Customizer > Typography > Primary Navigation fonts size for the mobile view.
Is that not working ?

Hello thanks for your reply, no this does not work ...

Yet we are on 20px but on the mobile display we are at 28px as on the computer display

Hi Matthieu,

I've checked the site and I didn't see the @media rule the plugin generates when a value is set for mobile.

Can you show us how you've set the font sizes? Perhaps a screen capture?

Let us know.

Oui bien sur, voici la capture d'écran :

Hi Matthieu,

What's the mobile breaking point you set for primary navigation?

Let me know :)

Hello, thank you for your answer. So effectively the breakpoint was 0 for mobile. I did this so that the mobile display was the same as the computer display: the 2 social network icons at the top right instead of the hamburger menu.

If I return the break point to 768 the hamburger menu icon reappears ...

Maybe there is a solution to keep the break point at 768px while keeping the social media icons top right on the mobile display as well?

Thanks 😃

Instead of adding the Icons to the Navigation, use the a Block or Hook Element to add the icons, you can use the generate_menu_bar_items hook.

Then they will appear in your navigation and mobile header.
You will still need to have a menu assigned to the Primary Navigation for them to display.

I assume you will be adding some other menus to the site ??

Hello, thank you for your answer, no there will be no other items in the menu, only social media icons.

no there will be no other items in the menu, only social media icons.

If this is the case, try:

1. Add the social icons using a block element or hook element, choose generate_after_header_content as hook name.
https://docs.generatepress.com/article/block-element-overview/
https://docs.generatepress.com/article/hooks-element-overview/

If you are not familiar with HTML, block element is a better choice.

2. Go to customizer > layout > primary navigation, set Navigation location to No Navigation.

3. Set the navigation mobile breaking point back to default so that you won't run into issues in the future.

Once these are done, try add this CSS to customizer > addtional CSS:

.inside-header.grid-container {
    justify-content: space-between;
}

Let me know if you need further assistance :)

Looks good to me perfect !

On the other hand, I used buttons for the icons of social networks, how could I add a Behance icon for example ?

Thanks 😃

It's good I found how to do it using font Awesome and getting the svg code that I replaced directly in the button in html!

Thank you ! 😃

Great!

Glad to hear that and you are very welcome Matthieu :)