[Resolved] Top Bar like GP

Home Forums Support [Resolved] Top Bar like GP

Home Forums Support Top Bar like GP

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2030787
    Sanu Kumar

    How can I make a top bar like GP.
    Top-Bar
    I know you’re using GenerateBlocks but how can I make that black background “Black Friday Sale” is written.

    #2030795
    Elvin
    Staff
    Customer Support

    Hi there,

    That can be done with GenerateBlocks but it also can be done with just custom HTML. (If I remember it right, the site itself uses custom HTML. It’s certainly not using GenerateBlocks for this.)

    The “Black Friday sale!” is a span element with class sale-name and is styled with this:

    .sale-name {
        background: #000;
        padding: 10px;
        display: inline-block;
        margin-right: 5px;
        font-weight: 700;
    }

    The entire HTML structure is:

    <div class="flash-sale">
    	<div class="grid-container grid-parent">
    		<span class="sale-name">Black Friday Sale!</span> Get up to <strong><span class="dollar-sign">$</span>30</strong> off GP Premium! <a class="smooth-scroll" href="https://generatepress.com/pricing">Learn more ➝</a> <!--<span id="countdown"></span>-->
    	</div>
    </div>

    Where the main element wrapper flash-sale is positioned sticky. Complete styling here:

    .flash-sale {
        background: #f0544f;
        padding: 10px;
        text-align: center;
        color: #fff;
        border-bottom: 3px dashed #191b29;
        z-index: 200;
        position: sticky;
        top: 0;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2030801
    Sanu Kumar

    thanks

    #2030811
    Elvin
    Staff
    Customer Support

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

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