Pro - header builder mobile positioning

[Pbalazs89]

Hi there,

I have a page set up here:

http://www.padthai.decorolux.com/

On mobile, I tried decreasing the height of the header. This worked fine, but the elements inside ( the logo and the mobile collapsed nav weren’t positioned correctly. I tried to play around with the margin percentages etc. However, now when I load the page on an iPhone, at first, it looks good, but hwen I start scrolling, the elements tilt up and stay there unless I scroll back to the top of the page. Do you have an idea how I could fix this? Thanks!

[ruenel]

Hello There,

Thanks for writing in! I have checked your header and I noticed that all your custom menu is using the same ID navli. Please keep in mind that an element ID must be unique. Please edit it and change the IDs to avoid any issues in the future.

Did you added height: 4em; in the custom css of the header? The original height is 7em and this is what is being followed in the mobile screen size as you scroll the page. If the bar height for the desktop and the mobile screen should be different, it is best that you create two bars in your header. The first bar could be for the desktop screens and the second bar will be good for the mobile screens. Having it this way, you’ll have more control over the bar heights and without adding any custom css which always have a conflict along the line.

Hope this helps.

[Pbalazs89]

Thanks, managed to fix it based on this.

[nico]

Hi @Pbalazs89,

Happy to hear that.

Feel free to ask us again.

Thanks.