Header Bar problem

[Peter789]

Hello!

I want to put the logo to the center for mobile & tablet devices and I don’t know how to do it

Can you please help me out?

[ruenel]

Hello Katarina,

Thanks for writing in!

It is best that you create two separate bars in your header. One bar is dedicated to medium and large screens and the second bar will be for your smaller device screens. You can show or hide the bar for each respective screens by utilizing the “Hide During Breakpoint” option. To learn more about it, kindly check this out:

• https://theme.co/docs/hide-or-show-content-by-device-size

We also recommend that you check out our video tutorials in creating your header by visiting our Youtube Channel:

• https://www.youtube.com/playlist?list=PLWPh_GoP7hYUINAmM_xyfBe1_WqLUo6U2

Best Regards.

[Peter789]

I have watched the tutorial but It doesn’t help at all…

[Peter789]

I am kindly asking you to enter to my website and fix that for me please, I am losing my nerves here…

[prakash_s]

Hello Katarina

You need to change a little in structure.
I created a “Test Header” page and a “Test Header” to achieve your requirement.
Please check screenshots below.

First of all, I copied the Header and renamed it as"Test Header".

Then I copied Bar 1 and Bar 2 and deleted the Mobile container from Bar 1.
Then delete PC container from Bar 2

Now I create three containers in bar 2, each container contains a single element.
Now I add navigation collapsed, Image and cart of canvas respectively.

Now and add logo image in the image element.
Now it shows properly in mobile.
Output Screenshot

Now you can check the “Test Header” and do all the changes that I have made and mentioned above or you can rename the “Test Header” as you like and assign to your page and posts.
Hope it helps you.

[Peter789]

PrakashS the legend! You are my life saver

I’m so happy when I see you reply to me

It works (kinda) but it needs some little fixes I think…take look at the pictures I attached bellow:

[prakash_s]

Hello @Kata789

Thanks for the appreciation.

I checked in my iPhone It is working fine at my end.
I checked the site on iPhone 6 in browser inspector, It looks fine here as well.

Please have a look at the screenshot

To link the logo image to the homepage you need to add homepage URL at URL filed of Link section of an Image element.

Please check the screenshot.

Navigation and shopping cart

To make the hamburger menu and cart icon you need to set margin-left value 0 for the first container and margin-right value 0 for the last container. Now values set to auto respectively. Margin auto makes elements centre aligned.

Thanks

[Peter789]

PrakashS you are the best! You deserve a raise…

How professional you are no words… 10/10

Thank you so much for the help! I appreciate it a lot <3

Wish you all the best,

Katarina

[prakash_s]

Hello Katarina

Thanks for the sweet words It helps us to serve you better

Have a nice weekend!
Thanks

[ruenel]

Hey Katarina,

Your reply has been withdrawn. You must have created another thread then.
We will be responding it shortly.

Cheers.

[Lunatic_Zorr]

Honestly, I’ve been trying to get the logo on my header to be a link to the homepage for ages, and couldn’t find a way to do it. Now I find this thread and there’s a screenshot showing how to do it. I feel soooo st*pid hahahaha It’s so easy!

Thanks everyone!

[tristup]

Hi @Lunatic_Zorr,

Really glad that we are able to help you on this.

Thanks