How to create a header with different content for different screen sizes

[haraldjoergens]

Hi there, I’m new to PRO, and quite impressed so far! But I’m stuck with an issue important for the website I’m working on:

For the five different screen sizes that can be selected in PRO. I would like a different header background image for each size. I would also need different text and fond sizes for each page.

Is there an easy way to do it that I managed to miss, or would I have to use CSS?

Thanks!

Harald

[jade]

Hey Harald,

You can create multiple bars in the header builder then assign the accordingly to which screen width you want them to be displayed.

For example, you can create a bar that will be displayed on the desktop version where it has its background then text and font sizes.

The you can create another bar that will be for another screen size which has the different background and font size.

Then to specify which screen sizes those bars will be displayed, you can make use of the Hide During Breakpoint option.

You may check this thread to read more about the Hide During Breakpoints feature:

Hide During Breakpoint - Explained

Hope this helps.