[Resolved] Three buttons above header

Home Forums Support Three buttons above header

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #312473
    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!

    GP Premium 1.2.96
    #312552
    Leo
    Staff
    Customer Support

    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.

    #313748
    Michael

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

    #313779
    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.

    #313780
    Michael

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.