Pro Header Responsiveness

[whitemedia]

Hi again,

I am trying to build my first Pro header and have used breakpoints to allow the logo image to be “optimized” for different screen sizes. The construction of the header is:

Bar with large logo image
Bar with ubermenu

You can see the header on this page: https://www.sleepstore.org/sleep-coach-blog/

My problem is that I cannot get the top bar with the image to “stick” to the lower bar when the screen size changes, except at the breakpoint sizes. Any size in between shows a white area in increasing sizes until the next break point down is reached.

However, If I use the same image with the traditional Pro Theme Options > Header, there is no white gap.

Can the gap be eliminated?

Thanks,
Chris

[Prasant]

Hello Chris,

Thanks for asking.

I can see the problem you are facing regarding gap being showing between image and navigation bar. It seems that the problem is coming because of the height property of the Bar element. Try adjusting the height under Bar > Dimensions.

Thanks.

[whitemedia]

Hi Prasant,

Thanks for the information. I have played with that setting so much! It is set for each breakpoint at the level where the image text starts to disappear behind the navbar using the Pro screensize viewer. This is how the header is currently setup.

I will send login details for you to see it yourself.

Thanks,
Chris

[friech]

Hi There,

Please add your image as the Bar’s background-image and also add the SleepStore.org as a headline instead.

Hope it helps,
Cheers!

[whitemedia]

Thanks again Friech. That makes sense.

One further question - using the method described above, how do I deal with the Height setting in the Dimensions panel of the Bar? It seems that the height must be set to a specific height. However, in doing so, I still have the original problem of space above and below the image if I set its Size & Position to full-width, rather than Cover. Is there a clever way around this?

[whitemedia]

Brief update - I have set the background Lower Layer to 100% auto / Cover. This gives the basic layout I am looking for, but the question still is how to deal with the Height setting.

[basanta]

Hi There,

Thanks again for asking!
You can set the height auto and it will take the height of the content inside the bar. But the image issue still will be there if the image height less than the bar height.
Only way to manage it to use a image with higher height so that it won’t show the gap.

Hope this helps!

[whitemedia]

Thanks Basanta,
No luck. Setting the height to auto makes the image disappear altogether. I think I am going to have to go back to the original Theme Options logo image, which behaves perfectly.

[rad]

Hi @cdnwhite,

You can set the height auto, but it may require a minimum height through CSS, but yes you could switch back to Theme Options logo.

Thanks!