align buttons in top bar

Actually I was able to get the alignment right on the top bar WHEN I use buttons to hold the text.

However, I made another version of the "Top Bar" and replaced the footer with it, just so you could see it. In that version I have used Headline blocks for the text, and I can't figure out how to make the container narrower. I can't find anyway to adjust the height of the container. Do I have to use buttons for this type of thing, or is there a way to adjust the height of the bar?

Thanks

Mark

http://generatepress.michianait.net

Hi Mark,

Would one of these videos be helpful for what you are looking for?
https://youtu.be/1VQECQxeyQE
https://youtu.be/yAleVWQi5EA

Let me know :)

Hi Leo,

Thanks for getting back to me. I did watch your videos, but I still can’t see how to make the bar narrower. I think I already have padding set to 0 both on the container and the headline blocks.

Mark

It's pretty narrow to me already:
https://www.screencast.com/t/lGEnPwA2

Is that not what you are seeing?

Leo,

The red bar in your screenshot is fine. I’m talking about the brown one down in the footer which I made with paragraphs instead of buttons. That’s the one I can’t seem to adjust the width on.

Mark

Leo,

Sorry I mean the "green" one in the footer, not the "brown" one.

Mark

Hi there,

is the issue the height of the green bar ? If so replace the text block with a GB Headline Block, set its Element Tag to P ( if required ) and then in Spacing - set the Bottom Margin to 0

Thanks David - that worked, and it brought up two questions (let me know if I should start a separate thread for these)

1. What is the difference between a paragraph block and a GB Headline block with the Element tag set to P?

2. I have created the bar using a "block" element type? Is that the correct way to go? (I didn't know if there was a difference between using a "hook" Element type of using a "block" element type.

Mark

1. What is the difference between a paragraph block and a GB Headline block with the Element tag set to P?

No difference aside from the GB Headline block has the CSS styling controls built in.
As a note - keep the normal Text and Headline Blocks for writing content. Only use the Headline Block when you need to custom style the block.

2. Block Element is the correct way to go.
Hook Element is used for adding HMTL/PHP to the site content or if you need to add a script to the site such as your Google Analytics tags.

Hi David,

So I guess that with the GB Headline block, there is no need for the standard Block Editor "paragraph" block.

Thanks, Mark

If you are simply adding a paragraph without changing the font size or margin-bottom etc then the WP paragraph block should be used.

GB's headline block allows you to have more control when needed.

Let me know if this makes sense.

Hi Leo,

Yes, that makes sense about the difference between the headline block in paragraph block.

If I want the top bar icons (for example, phone and email) to be active on phone, do I need to use buttons for the mobile version, and just text for the desktop version, or how would you suggest to do it?

Mark

I would add them as a GB Buttons Block.
For desktop set the Icon and Text.
Then switch to the mobile tab, edit the Buttons Typography and set the font size to 0 to hide the text, and then set the Icon size to an explicit PX size and remove the right margin.

Thanks David,

Does that automatically enable the "call" function and the "email to" functions on mobile, or do I have to add links for some other function to make Tel and Email clickable on mobile?

Thanks

Mark