How to add a button to header

Hi there,

couple of options:

1. Make a menu item look like a button:

https://docs.generatepress.com/article/adding-buttons-navigation/

2. Use a Block Element to add the button:

https://docs.generatepress.com/article/block-element-hook/

i) enable the Elements module in Appearance > GenareatePress
ii) Appearance > Elements -> Add New -> Block Element
iii) Select the Hook: menu_bar_items
iv) add whatever you need to the editor
v) set the Display Rules > Location to Entire Site or the locations you require.

NOTE this will appear also on Mobile devices aside of the hamburger icon.
You can use GP hide-on-* classes to remove it if its not required:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Hi David,

Thanks for the information, but I cannot see a hook name as menu_bar_items. I'm not allowed to write it in the hook name section as well.

I just want to add a button as shown on the following link:
https://ibb.co/rwmPc4Y

Best wishes,

Tugce

Hi David,

Just a quick update. I made the changes you mentioned, but nothing changed on the menu.

https://ibb.co/xgGkhzr

Best wishes,

Tugce

In Customizer > General, can you make sure the Structure is set to Flexbox ?

Hi David,

I switched to Flexbox but nothing changed on the menu.

In your Block Element you should now see the menu_bar_items hook in the list of hooks, select that. NOT a custom hook.

Hi David,

Thanks, it worked. How can add some CSS such as shadowing?

Besides, would it be possible to hide that button for mobile view?

Best wishes,

Tugce

Do you have GenerateBlocks Pro ?

Hi David,

No, I don't have it.

How can I hide the block for the mobile view?

Best wishes,

Tugce

Select the Block in the editor, go to Advanced > Additional CSS Classes and add: hide-on-mobile