How to make like GP

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

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

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

disabled

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

It is not working

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.

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

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

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

I am already using this CSS

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

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.

WP Rocket disabled

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.

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