Hide Fixed header only in responsive mode

[sirajcmr]

Hi, I got a request to hide the sticky bar only in mobile/tablet/responsive mode. But need same thing when viewed in Laptop or desktop Can you help me how to do that.. Regards  

[sirajcmr]

The reason is.. We made our website as an app. The app will have a header... then when our stikybar comes... both headers eat up a lot of space... So i really trying to disable stickybar in responsive mode.. at the same time keeping it in normal laptop or desktop mode Please help Regards

[H.K. Latiyan]

Please confirm which stickybar you are referring to ?

[sirajcmr]

Sorry, may be I did not make it clear :) If you see below image (our App). we have that black bar (title bar). We already have a title bar as part of our App, so this black title bar is becoming redundant and takes lot of space.. so we do not this bar to appear when we scroll down in mobile phone or in App (The App is just a webview App in Andrioid) >> So what I did is changed the settings here... Now what happens is, this bar is also disabled in or laptop or desktop.. so the settings is universal. >> So we are kinda stuck, as we need this title bar in Normal Desktop and laptop but do not want this bar in responsive mode.. Do not know what to do as we could not proceed with our App design and Desktop screen at the same time.. PS: I have these kind of different settings in theme like NewPaper by tagdive .. Could you help us in this regard as we are stuck now Regards

[sirajcmr]

As we use trasparet header in modern theme.. this black bar will come only when we scroll down in mobiles.. Appreciate your help

[H.K. Latiyan]

Ok you mean the fixed header. We add a class "fixed" in the header while scrolling through javascript to make the header fixed at the top. You are using transparent header and want to hide it in mobiles only, then you can use media quary css. So use this css in your customize->custom css:

@media (max-width:768px){

header.sleek.transparent.fix.fixed {

display:none;

}}

[sirajcmr]

sweeet... I  will try this and udate you.. if this works, it will be a life saver for me :) Thank you

[H.K. Latiyan]

Waiting for confirmation...

[sirajcmr]

Hi, I confirm that it works fine...i mean, the code you shared works fine. Thank you very much, we are good to go with our webview Android App now :) One more request, if possible, pelase change the sticky bar name in my forum heading to "Header" or Title or fixed header so that other users with similar query will be easily find this solution. Thank you again for great support. Regards SiRu

[sirajcmr]

Also: As a feature if you hae option to add, may be you could add this as an option.. I mean as a new feature :)

[H.K. Latiyan]

Thanks for confirming. So marking the topic as resolved and closing the topic. Actually you are the first user who asked to hide fixed header in mobile view. So if we get more request for this feature then we will add it in our update.

[Author]

Posts