[Resolved] Three buttons above header

[Michael]

Helli all,

First time post here. A client wants to imitate this effect on the desktop view of this website (http://www.alphagraphicsseattle.com) where there are 3 buttons above the header (send a file, request a payment, request a quote)

Can someone please help me do this?

Many thanks!

[Leo]

Hi Michael,

You should be able to achieve that with the Before header hook:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

With GP’s button classes:
https://docs.generatepress.com/article/adding-buttons/

Let me know if you need more info.

[Michael]

Thank you! Odd request. Could I pay someone out there a fee to show me how to do this?

[Amos]

Add this to your “Before Header Content” Hook.

<div class="grid-25 header-one" style="text-align: right;"><a href="http://link">TEXT TEXT TEXT</a></div>
<div class="grid-25 header-two" style="text-align: right;"><a href="http://link">TEXT TEXT TEXT</a></div>
<div class="grid-25 header-three" style="text-align: right;"><a href="http://link">TEXT TEXT TEXT</a></div>
<div class="grid-25 header-four" style="text-align: left">000000000</div>

Then add this inside your css –

.inside-header .grid-25:nth-child(1) a{
	background-color:#1ED030;
	color:#ffffff;
	padding-top:2px;
	padding-bottom:2px;
	padding-right:10px;
	padding-left:10px;
	border-radius:5px;
}

.inside-header .grid-25:nth-child(2) a{

	border-style:solid;
	border-width:1px;
	border-color:#c6c6c6;
	border-radius:5px;
	padding-top:2px;
	padding-bottom:2px;
	padding-right:10px;
	padding-left:10px;
	background-color:#1ED030;

}

.inside-header .grid-25:nth-child(3) a{
	color:#ffffff;
	background-color:#1ED030;
	border-radius:5px;
	padding-left:10px;
	padding-right:10px;
	padding-top:2px;
	padding-bottom:2px;

}

`

Change The links,content and the colors.

[Michael]

Wow. Thanks. I’ll give this a try. I owe you one.

[Author]

Posts