[Resolved] Button on mobile menu

[Escobar]

Would it be possible to put the user icon to log or register in the mobile version as a button?

website is https://www.mivestuariolaboral.com

Thanks in advance

Kind regards

[Ying]

Hi Escobar,

I would recommend to use Font Awesome plugin, after their recent update, we’ll be able to use SVG icon from Fontawesome website, and it only loads the icon you use.

Try to follow the steps below:

1. Install Font Awesome plugin, activate it, and enable SVG option.
https://www.screencast.com/t/jIQGjaxQS

2. Go to fontawesome.com find the icon you’d like to use, copy the html link.
https://www.screencast.com/t/lB6gUBxBQo3

3. Go to Appearance > Menu, add the icon’s html as Navigation Label into your off-canvas-menu, use the my account link as url.
https://www.screencast.com/t/z9icEXqSNc

Then the icon will show in the menu location you assigned to as a menu item.

Let me know if it works!

[Escobar]

Sorry, I haven’t explained to you that the menu is customized to look like this.

The icon would be in the main menu and in the mobile version it was not visible.

This is the topic https://generatepress.com/forums/topic/search-bar-4/

and the icon is actally inserted with a hook.

I dont know what i have to change now.

Thanks in advance

[Ying]

Oh I see, then you just need to duplicate that hook and choose generate_inside_slideout_menu or generate_afer_slideout_menu for the new hook 🙂

[Escobar]

Thanks but I think I cant explain myself, what I would like to know is whether, as in the desktop version, on the mobile it can be seen like a button.

Thanks.

This is my hook: <span class=”menu-item”>

<i class=”_mi _before dashicons dashicons-admin-users” aria-hidden=”true”></i>

</span>

[Ying]

Once you added it, we can help you with the CSS to style it to button look 🙂

[Escobar]

Added!

Best regards.

[David]

Hi there,

what layout do you want for the Mobile Menu ? Could you share a mockup image of how you would like it to look?

[Escobar]

Hi David! Pleased to see you.

Sure.
Something similar to This:

Best regards

[Leo]

Currently that ENTRAR button is added as a menu item.

Try adding it using the generate_menu_bar_items hook instead then it should show up on mobile automatically:
https://docs.generatepress.com/article/generate_menu_bar_items/

[Escobar]

Awesome, It works!

Thanks.

Is there a way to customize the button sharp? Rounded corners, ghost style…?

Best regards.

[David]

Looks like your using a GenerateBlocks Button – you have full color, padding, border radius controls within the buttons Settings.

[Escobar]

Ok thanks.

[Author]

Posts