[Resolved] Full-Width Bar

[Andy]

Hi,

Just installed your excellent theme and purchased the premium package. I need to add a full-width coloured bar above the header and then add a telephone number to it.

Is this possible using the customizer or will I have to add the code manually in the header.php? (i’m using the child theme).

[Tom]

Hi Andrew,

You can use GP Hooks for this.

In the Before Header hook, add something like this:

<div class="full-width-bar">
      <div class="grid-container grid-parent">
            Add your bar content in here
      </div>
</div>

Then to style it, use this CSS:

.full-width-bar {
      background-color: #222222;
      color: #ffffff;
      padding: 15px;
}

Adjust as necessary 🙂

Let me know if you need more info!

[Andy]

Superb, will try it thanks.

[Andy]

Works perfectly thank you.

[Tom]

Awesome, no problem 🙂

[Casper]

This method works, but shows on every page and post
If I dissable the Top bar in a page, it still shows

How can I make the Top bar 100% of the page widht?

[Leo]

Hi there,

You can make the width and inner width full: https://docs.generatepress.com/article/top-bar-widget-area/#adjusting-the-layout

[Author]

Posts