[Resolved] Top Bar like GP

[Sanu Kumar]

How can I make a top bar like GP.

I know you’re using GenerateBlocks but how can I make that black background “Black Friday Sale” is written.

[Elvin]

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;
}

[Sanu Kumar]

thanks

[Elvin]

No problem. 😀

[Author]

Posts