Different Masthead module on mobile / desktop

nicolasfetting-hotmail-com

Hello,
some weeks ago I asked about how to show Masthead regarding the screensize or device used.
https://www.joomlart.com/forums/d/33648-masthead-visible-xs-hidden-lg-issue/2
Now the client wants to change all the headers in masthead regarding the device (with logo on desktop, without logo on mobile).
Funny, on the header on the homepage it's working, on others not.
I made a test on this site
https://transtechture.de/index.php/de/warum-wir/was-ist-transtechture
and when I change the browser window on desktop to a smaller size, it's working and the header without logo is showing on the mobile size, BUT on my mobile, it's not working and the pic with the logo is showing up.

Don't know what I made wrong as I even duplicated the working masthead modules and just changed the pic / asignated menu etc.

Any idea?

Thanks in advance
Nicolas

saguaros

Hi Nicolas,

I still can see the logo on my phone

nicolasfetting-hotmail-com

Yes, exactly, it should show without logo, on desktop it's working, reducing the width of the browser window to mobile size, on mobile, it's not working.
Any idea how to fix this?

Thanks in advance
Nicolas

saguaros

Hi Nicolas,

I must misunderstand your point, you want to hide the logo in small screen like mobile, right?

You can open this file:

/templates/ja_mono/tpls/blocks/header.php

At approx line 33, you can see this line of code:

<div class="logo">

change it to:

<div class="logo hidden-xs">

The hidden-xs class will help you to hide logo on mobile. If you wan to hide in other screen sizes also, use the associated class here: https://getbootstrap.com/docs/3.4/css/#responsive-utilities-classes

Regards

nicolasfetting-hotmail-com

Hello Saguraros,
thank you very much for your time and help.
Sorry, maybe I have not explained well my idea.

I have two masthead header (only here for testing https://transtechture.de/index.php/de/warum-wir/was-ist-transtechture) showing a blue pic with a chamaleon.
(one is called "JA Masthead Was ist Transtechture LG" the other one "JA Masthead Was ist Transtechture MOBILE".
The picture for desktop shows the logo on top.
Now on mobile, I want to show another picture (same chamaleon) but without the logo.

So in the desktop masthead module, I have the Module Class Suffix " hidden-xs visible-lg"
and on the mobile module " hidden-lg visible-xs"

But it's not working.

Thanks in advance
Nicolas

saguaros

Hi Nicolas,

I'm a little bit confused as the logo belongs to the header, it doesn't relate to masthead here.

Could you share screenshot of how you want it should be in desktop + mobile so I can check?

nicolasfetting-hotmail-com

Hello Saguaros,
thank you, I attach some screenshots to show the issue.
I'm talking about the logo that shows up in the header picture, TRANSTECHTURE with the circle, it's part of the jpg.

On normal, large desktop browser window, everything works fine, the blue chameleon picture (transtechture-header.jpg) loads with the logo inside.
Once I decrease the size of the browser window on desktop, the right picture loads (transtechture-header_MOBILE.jpg) without the logo inside.

Now, when I open the page on my mobile, the wrong picture loads (transtechture-header.jpg) instead of (transtechture-header_MOBILE.jpg).

I attach the three screenshots and the two header pictures.

Thanks in advance
Nicolas

This header pic should show only on desktop

This header pic should show only on mobile

nicolasfetting-hotmail-com

Hello, suddenly on my site (life!) appears on top of the masthead header this text "string(5) "testt" string(5) "testt" "
Are you making any changes??

Regards
Nicolas

nicolasfetting-hotmail-com

Hello,
I know you are trying to fix the mobile / desktop issue, but could you please fix this again?

Thanks in advance
Nicolas

saguaros

Hi Nicolas,

Yes, I'm debugging on your site to check the issue. I will remove it.

nicolasfetting-hotmail-com

Thank you Saguaros!!!! I appreciate your effort!!!
Regards
Nicolas

saguaros

nicolasfetting-hotmail-com
I removed the debug code.

nicolasfetting-hotmail-com

Thank you Saguaros!!!
Any chance to fix that issue with the headers?
On my desktop it's working fine, when I narrow down the browser window, on the smallest size the chamaleon picture WITHOUT the logo loads (that is as it should be).
On my mobile, no headers are shown, here it would be great, if the pic without Logo would load.

Saguaros, if this is not possible, please tell me and we will find another solution!

Thanks in advance
Nicolas

saguaros

Hi Nicolas,

It turns out that on the article details page, it will take the image of article to show in masthead section, not the masthead module and that's why you don't see the changes made in module settings. So I'm afraid we can't use modules this case.

Regards

nicolasfetting-hotmail-com

Ok, thank you Saguaros,
if there is no solution, I will see to find another way.
One thing, you desactivated the masthead on mobile, could you please change it again so masthead will be shown on all screesizes?
Thanks in advance and sorry for all that.

Regards
Nicolas

saguaros

nicolasfetting-hotmail-com I enabled it, kindly check.

nicolasfetting-hotmail-com

Not showing yet.

nicolasfetting-hotmail-com

Sorry, found another solution, problem solved.
Please leave it as it is.

Thank you Saguaros!!!!!!!

Regards
Nicolas