How to make like GP

[sanu kumar]

How to show a discount link same like GP is using for HALLOWEEN.

I tried but it is not looking good.

[David]

Hi there

try using the GenerateBlocks plugin:

https://wordpress.org/plugins/generateblocks/

Then create your top bar with the Block Element:

https://docs.generatepress.com/article/block-element-overview/

You can set the Block Element to Hook and choose the generate_before_header hook

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sanu kumar]

I did what you said but there is a gap between top bar and header, how to remove that gap

[Leo]

Can you clear and disable the caching plugin so we can take a closer look at the code?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sanu kumar]

disabled

[Elvin]

Hi,

I did what you said but there is a gap between top bar and header, how to remove that gap

The gap added was a default margin-bottom added to the GB element. To remove that, you can check the block element you’ve added on the top bar and remove its default 20px margin-bottom on the Spacing settings of the headline block.

Or, you can add this CSS code:

.gb-headline-wrapper.gb-headline-wrapper-942baf85 {
    margin-bottom: 0;
}

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

[sanu kumar]

It is not working

[Elvin]

It is not working

Can you add the url to the page in question again? So we could re-check which element is adding it. Thank you.

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

[sanu kumar]

https://www.masteryblogging.com/a2-hosting-reviews/

[Elvin]

Thanks,

This should work:

.gb-headline-wrapper-ef21d474{
    margin-bottom: 0;
}

If it doesn’t, can you add a unique ID or CSS class to your GenerateBlocks inserted as the top bar?

So we could use it as the css selector to remove the margin-bottom:2em that’s causing the gap as shown here: https://share.getcloudapp.com/Blu1vNy0

Once you’ve added a unique ID or class on it, we can do something like this example CSS code to remove the gap.

#your-unique-id{ margin-bottom: 0; } or .your-unique-class{ margin-bottom: 0; }

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

[sanu kumar]

Again, there is a gap between header and top bar.

I am already using this CSS

.gb-headline-wrapper-ef21d474{
    margin-bottom: 0;
}

[Leo]

Can you clear and disable the caching plugin so we can take a closer look at the code?

You shouldn’t need CSS when using GB.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sanu kumar]

WP Rocket disabled

[David]

Hi there,

remove the CSS – as that should not be required.
Edit your Headline block, in the Settings > Spacing select the Bottom Margin and enter 0 into that value. This will override the themes H2 bottom margin.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sanu kumar]

Okay and do I know how to give a dotted line just below the top bar?

[Author]

Posts