XF 2.2 Trying to make header consistent between normal and responsive modes on PC

[CBI Web]

This first screenshot is how the header looks on a PC/Laptop with the browser width reduced to just before responsive mode kicks in.





This second screenshot shows what it looks like after I reduce the width enough to trigger responsive mode.




As you can see, the logo image and background color totally changes. So how do I make them look the same?

 

[CBI Web]

Anyone?

 

[Paul B]

That doesn't happen in the default style - the header and logo colours don't change.

So it's something related to your custom style.

If you are using a third party style, contact the author.

Other than that you will need to use the browser inspector to determine what is causing the change.

Your site is behind .htaccess auth so it's not possible to see.

 

[CBI Web]

Your site is behind .htaccess auth so it's not possible to see.

Yeah it's still in development, sorry about that. The style is a child of the default, I only changed the header area so far. Everything else is default. I'll check again what might have caused it.

 

[CBI Web]

@Brogan I've discovered what's causing the issue.

By default in ACP > Appearance > Style properties > Header and navigation, both the "Header/logo row" and "Navigation row" background color is blue.
In Responsive mode, the Header/logo row inherits the background color of the Navigation row as they combine into one row.

So when the background colors of those two rows are not the same, it causes a problem when responsive mode kicks in, because the Navigation row basically negates the Header/logo row.

Seems like a design flaw IMO, as these elements should be able to be customized independently. I'll try to find a workaround.