[Resolved] Adding a button to header

[bbrdavid]

I’d like to put a button in the middle of the header just like in the wpcurve.com homepage.
Would I do this with hooks? Could you point me to some sample code? Thanks very much, sorry if this is a very basic question.

[Tom]

Hi there,

You could do this using hooks, the Page Header add-on or the Sections add-on.

You would first add the HTML for the button:

<a class="custom-button" href="https://generatepress.com">GeneratePress</a>

Then you would have to style that button:

.custom-button,
.custom-button:visited {
      display: inline-block;
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

Adjust as needed 🙂

[bbrdavid]

Awesome, Tom! And I even understand it…guess I’m learning 🙂

[Tom]

Awesome! 🙂

[Rylan Urban]

How can I get the button centered on the whole header, no just the text area?

like on http://voyagesolarenergy.com

the button is centered under the text.

I want it centered under all of of the text + logo

(currently placed in after-header content hook)

[Tom]

Since the elements are set to display: inline-block, they’ll do their best to fill in the spaces.

If you want it to clear below those two elements, you need to add a clear element above the button:

<div class="clear"></div>
button HTML here

[Rylan Urban]

Perfect 🙂

DIdn’t know that code existed!

[Tom]

Glad I could help 🙂

[Author]

Posts