Archived topic
Three buttons above header
4 replies · Started by Michael on May 1, 2017
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!
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.
Thank you! Odd request. Could I pay someone out there a fee to show me how to do this?
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.
Wow. Thanks. I'll give this a try. I owe you one.
