[Support request] How to add a button to header

[Tugce]

Hi,

How can I add a button to header, right after the ‘Contact’ and the language switcher?

Best wishes,

Efe

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tugce]

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

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tugce]

Hi David,

I switched to Flexbox but nothing changed on the menu.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tugce]

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

[David]

Do you have GenerateBlocks Pro ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tugce]

Hi David,

No, I don’t have it.

How can I hide the block for the mobile view?

Best wishes,

Tugce

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts