[Resolved] Add Button to Header

[Darryl]

Love your product…

Using the default GP theme I :

1.) created a global Header Element
2.) changed location of primary navigation
3.) changed background color on header and nav

resulting in this:

View post on imgur.com

My question is what is the recommended, best strategy to add a button in the location of red square shown in the image?

thx

[David]

Hi there,

can you share a link to your site so i can advise on the best method.

[Darryl]

Sorry, no can do.. developing in a local lamp dev environment.

[Leo]

Tough for us to help without seeing the site.

Would a header widget work for that?
https://docs.generatepress.com/article/header-widget/

[Darryl]

Thanks for the follow-up. According to your advice, I should:

1.) create an html button, then
2.) use a widget to place the custom html button in the header area, which will be visible at the location of the red box in this pic

https://i.imgur.com/IWwif9Dl.png

Question: It seems that you guys have effectively answered my question (I have not implemented the solution yet), what I am confused about is:

Why would you need access to my site to provide a “best strategy” type of answer… is it a matter of being able to “view page source” and recommending minimal html / css code, rather than the use of a plugin (widgets plugin)? (There has to be millions of people that develop in an offline lamp/wamp environment)

If minimizing plugin use was your concern / goal, would this possible solution, that I found in your documentation be better? (I only need 2 sections, left/right -logo/button).

https://docs.generatepress.com/article/split-header-three-sections/

[David]

Yes, your understanding of Leo’s advice is correct.
Being able to see a site makes it easier for us to advise on the best solution.
As GP is flexible sometimes the obvious solution is not the best solution or necessarily the correct solution. Depending on the site layout you have or any other custom CSS / functions added to site may mean what we propose does not work.

The header widget with a HTML button won’t require any additional plugins, so the Split Header document should not be required.

There are many alternative options as well, for example if you use the Block Editor then the Block Element can also be used and hooked inside the header:

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

For a simple button its probably not the best solution, but if you wanted something more complex and and wanted visual styling you could install our GenerateBlocks plugin and create your own custom content.

The advantages of the Block Element is, like all the GP elements, is they have Display Rules which would allow you to dynamically display the block.

[Darryl]

Actually I am using GenerateBlocks and I would like to use visual styling… have any quick instructions for a newbie. It wasn’t readily apparent to how to achieve my goal. I am saying “button” now, but I may want to add social icons as well, so visual styling probably provide more control and less pain 😉

[Darryl]

Never mind that last request… I figured out why my “experiments” weren’t working… there was a conflict with another plugin. I deactivated all my other block plugins, except Redux and my basic “image” block came back. I started experimenting the header again.. and BANG! I can now visually edit my header…

Thx again!

[David]

Awesome – glad to hear that!

[Author]

Posts