Move Buttons in Header to 2nd Row?

[ohiocannabis]

So I have 2 Buttons in my Header that I would like to have populate in a 2nd row in the Header for the mobile version

So what do I need to do to get these 2 Buttons in my Header in the second row?

Home

Thanks!

[ohiocannabis]

Still need help on this, thanks!

[tristup]

Hi John,

Thanks for reaching out.
You have created the Header using the Header Builder, so you can add another Bar under the existing one and move the buttons into it.

Hope it helps.
Thanks

[ohiocannabis]

Ok so I did create a new bar and add the 2 buttons

But how do I get them to be centered and spaced even from each other within that bar?

And how do I get this bar to only show up on tablets or mobile when the screen size reduces?

[marc_a]

Hey John,

Would you mind sharing your admin credentials so that we can check on your setup properly? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[ohiocannabis]

Ok here is the login info in a secure note

[ruenel]

Hello John,

The given credentials are not working for us. Please double-check.

Meanwhile, you can do the following to resolve your issue:
But how do I get them to be centered and spaced even from each other within that bar?
And how do I get this bar to only show up on tablets or mobile when the screen size reduces?

1.) In your Bar 2 element settings, use the “Hide During Breakpoints” option to hide/show the Bar 2 element:

• Hide or Show Content by Device Size | Themeco Docs

2.) In your Container element, enable Flexbox and position them to the Center:

Best Regards.

[ohiocannabis]

ok great, so I was able to center them, but now they are smashed together

Is it better to adjust margin or padding to space them apart? And adjust which setting left or right?

Thank you!

[tristup]

Hi John,

You can add a right margin to the first button or a left margin to the second button. Please find the screenshot describing the option.

Hope it helps.
Thanks

[ohiocannabis]

Ok that worked out great now, thank you!

So I was able to set that 2nd Row to only show on Mobile versions and was able to disable the Buttons in the 1st Row when the Mobile is showing

But I think the logo doesn’t look totally centered on the Mobile version?

Does it look like it’s centered to you?

I want it to be in the left corner when on normal desktop, but when people are viewing it on Mobile/Tablet, I want it to be Centered.

Thanks!

[tristup]

Hi Jhon,

I have checked, and the logo is in the center on the mobile devices, and on the desktop, it is in the left top corner.

Thanks

[ohiocannabis]

What is that purple space? It does seem as it’s a bit off centered when I look at it and maybe that’s the reason.

Why is it favoring the right? Do I need to resize the original image or something?

[tristup]

Hi Jhon,

The purple section shows what I have inspected through the Browser Debugger tool. It can be easily understood; the space from right to left is the same, and the logo is in the center.

Thanks

[ohiocannabis]

Ok then well it looks like I am set on this now then, thank you.

[tristup]

Hi Jhon,

You are most welcome.