[Resolved] How to add a top bar widget bar

[Ying]

Hi Tina,

Seems the header wrap which wraps the column block is gone.

If I target the column block, the CSS might target the other column block as well.

Can you go to the column block and give it an additional CSS classtop-header-bar as show in the screenshot below:
https://www.screencast.com/t/eTf153mtpz

Then change the CSS to this:

.top-header-bar.wp-block-columns.alignfull.has-background {
    padding: 10px 10px;
}

Let me know 🙂

[Tina]

Hi Ying,
unfortunately, it didnt work. I added top-header-bar to the column as instructed + copy/paste the new code inside Customize/ Additional CSS. Nothing happened

I also delete my top header bar and started from scratch which didnt work either

another thing is that the top header adds empty spaces below

indeed, There is a gap of 50 px between the header and the top header bar that shows when i create the header bar and disappears when i delete it.

Thank you

[Tina]

e

[Tina]

Hi Leo, thank you for your reply.

The black bar is not part of a design i am trying to achieve. Its actually empty space between my top hear bar and my header.

Its black because i colored my background black.

I want to get rid of that empty space and I would appreciate your help.

I think it might have to do with the addition of the top header bar…

Thank you

*Also, to answer your question, i was able to upload Generateblocks but i want to use it to create my Blog page only.

[Tina]

X

[Ying]

Hi Tina,

You changed the column block from alignfull to alignwide, that’s why the CSS doesn’t work anymore.

Try this CSS, I removed the alignfull selector:

.top-header-bar.wp-block-columns.has-background {
    padding: 10px 10px;
}

[Tina]

That worked. Thank you!

[Ying]

No problem 🙂

[Tina]

Just so you know, The black bar issue hasn’t being solved yet

[Leo]

Is the phone number all you want in the top bar area? If so we shouldn’t need to use CSS or a block element at all.

The wp columns block is what’s causing the black bar and I wonder if we are over-complicating things.

Let me know 🙂

[Tina]

Hi Leo,

Could you please direct me in an alternative way to create a top bar that wouldn’t add an extra column or whatever is causing the extra space underneath.

We might add extra widget in the future in the top bar like address and email contact

Thank you

[Leo]

In that case just use the default top bar widget area instead of creating a block hook element for it:
https://docs.generatepress.com/article/top-bar-widget-area/

[Tina]

Yes, that was the original plan but I couldnt find the default top bar widget in the this version of Generate Press. I remember seeing it in the old version

There’s nothing inside Customizer either.

Only Header/ Primary navigation…. I also checked Appearance/ Widgets and i dont see a section for Top bar

Tina

[Leo]

That sounds super strange.

So you don’t see it here?
https://www.screencast.com/t/L4kxajkM

If so can you disable all plugins to eliminate any conflicts?

[Tina]

Hi, i disabled the plugins and it worked. Thanks

[Author]

Posts