How to add a top bar widget bar

This topic has 40 replies, 4 voices, and was last updated 4 years, 9 months ago by David.

Viewing 15 posts - 1 through 15 (of 41 total)

1 2 3 →

Author

Posts
July 7, 2021 at 3:12 pm #1848248

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

July 7, 2021 at 4:29 pm #1848272

Leo
Staff
Customer Support

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 🙂

July 7, 2021 at 5:41 pm #1848320

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

July 7, 2021 at 5:45 pm #1848324

Tina

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

Still looking to change the padding…..

July 7, 2021 at 6:28 pm #1848335

Leo
Staff
Customer Support

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

July 8, 2021 at 3:18 pm #1849355

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.

July 8, 2021 at 4:15 pm #1849385
Ying
Staff
Customer Support
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;
}
```
July 8, 2021 at 7:32 pm #1849444

Tina

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

July 9, 2021 at 9:03 am #1850193

Ying
Staff
Customer Support

You are welcome 🙂

July 9, 2021 at 5:15 pm #1850489

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

July 9, 2021 at 10:24 pm #1850579

Ying
Staff
Customer Support

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 🙂

July 10, 2021 at 10:56 am #1851175

Tina

Sure here it is 🙂

July 10, 2021 at 12:31 pm #1851216

Leo
Staff
Customer Support

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.

July 10, 2021 at 8:44 pm #1851365

Tina

sorry , here it is again

July 10, 2021 at 9:47 pm #1851374

Leo
Staff
Customer Support

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