How to disable the custom Header Navigation for mobile site?

css

(Abdul Munim Zahid) #1

This is a pretty noob question :frowning:

Anyways, i wish to disable the custom header (that i added to my discourse forum) on mobile sites. And replace it with another header that i will make for the mobile version of the forum.
What will be the best way to do that?


(Michael Downey) #2

In customizations, click the mobile phone icon to the right, then click the new “mobile header” tab that appears:


(Abdul Munim Zahid) #3

This where im confused, I did add a totally separate navigation menu there. With its own Mobile CSS. Im also positive that it was enabled, yet when i visit my site from mobile; I still see the old one. The one that it is loading for the desktop site,


(Michael Downey) #4

Are you sure the mobile CSS & customizations are being engaged? What device/resolution/etc.? Maybe a screenshot would help.


(Abdul Munim Zahid) #5

See this screenshot of the code for the normal navigation:


And this is a screenshot of the Mobile header:

I have tried from my OnePlus One and also from the Chrome Inspector. See the screenshot for the chrome inspector:

LInk: forum.apexinvesting.com


(Kane York) #6

It says desktop-view not-mobile-device there - did you refresh? If so, that means that it’s not being detected as a mobile device.


(Abdul Munim Zahid) #7

I did refresh, I also tried it on OnePlus One and a windows phone. Also cleared the browser cache and all!


(Dean Taylor) #8

Visit the URL:

Note that there is no 1 or 0 on the end - this should stop forcing either mobile or desktop mode and display the correct mode based on detection.


(Abdul Munim Zahid) #9

Okay, so When i set mobile_view to 1, the css for the mobile site loads properly. However, when i simply enter
forum.apexinvesting.com from a mobile device; the website is still treated as a desktop device. What might be causing that?


(Dean Taylor) #10

I’m seeing the following in your HTTP responses:

X-Cache: Miss from cloudfront
Via: 1.1 20497c05bf77243afb14729ba45880ed.cloudfront.net (CloudFront)

This indicates to me you are using a CDN (CloudFront) between your server and the users, it is quite possible this is causing an issue. Perhaps with browser / “User Agent” detection, it might be being stripped by CloudFront.

To prove this is the case, add your domain / origin IP to your local hosts file to by pass CloudFront to test.

(this assumes mobile detection is done this way by Discourse, not 100% positive it is).
Yeap, user agent string used:



(Abdul Munim Zahid) #11

Yes, CloudFront was the culprit indeed!
Thank you!