[Resolved] How to add a top bar widget bar

[Tina]

Hi Leo,

I believe top header bar was remove from the old version and i will like to have it back as I want to create something similar to this page:

http://cloe-brooks.themerex.net/home-3/

Could you please tell me how to create Top header bar + widgets (Home address + phone number + “Make an appointment” (Clickable button with hover)

Thank you

[Leo]

Hi Tina,

Looking at the layout you want to achieve, I believe using a block element with GenerateBlocks would be the easiest solution.

Take a look at this video and try to get started:

Let me know if you run into any issues 🙂

[Tina]

Hi leo,
I wasnt able to follow the directions step by step but i still managed to create a top header bar with widgets 🙂

Unfortunately, the layout panel doesn’t show on my end and i cant figure out how to adjust the padding.

The header top bar is too thick as is.

I also added a button with “Make a reservation” but i wasnt able to modify the button style to square instead of oval.

Thank you in advance for your assistance

[Tina]

Nevermind about the button style, i just figured it out!

Still looking to change the padding…..

[Leo]

Can you link me to the site so I can see the progress?

[Tina]

hi Leo,

I put the credentials in the private section below. I will delete as soon as i hear back from you
Finally decided not to add all the widget in the the top bar, only added the phone number. padding still needs to adjusted.

[Ying]

Hi Tina,

Are you looking to adjust the padding as shown in the screenshot below?
https://www.screencast.com/t/KhxRowzOW

If so, try this CSS:

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

[Tina]

Thank you very much Ying. that worked out for me 🙂

[Ying]

You are welcome 🙂

[Tina]

Hi Ying,
I just modified the color of my top bar an the coding you provided earlier is not longer working. Could you please have a look again?

Also, while you are there, you will notice a black bar inside my header. That’s my backgroundcolored black that is showing which means that I have a gap between the header and the top bar… I wasnt able to fix it…

If you could please check. Thank you!

Tina

[Ying]

Hi Tina,

Once the topic has been marked as resolved, the info in the private info field will be erased.

So could you send me the credential and website again using the private info field?

Let me know 🙂

[Tina]

Sure here it is 🙂

[Leo]

I don’t see the password. Please provide it using the private URL field.

It’s secure and erased as soon as the topic is marked as resolved.

You can also just change the password afterward.

[Tina]

sorry , here it is again

[Leo]

Let’s fix one thing at a time.

For the black bar between the top bar and the header, are you able to use GenerateBlocks on your site?

Can you show me the top bar design you are trying to achieve?

[Author]

Posts