Hide Fixed header only in responsive mode

Last updated on by

Home › Forums › Legacy Support › Support queries › Styling issues › Hide Fixed header only in responsive mode

Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 7, 2016 at 9:53 pm #41776
    sirajcmr
    Spectator
    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  
    April 7, 2016 at 11:40 pm #41789
    sirajcmr
    Spectator
    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
    April 8, 2016 at 5:17 am #41805
    H.K. Latiyan
    Participant
    Please confirm which stickybar you are referring to ?
    April 8, 2016 at 7:50 am #41836
    sirajcmr
    Spectator
    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
    April 8, 2016 at 7:53 am #41837
    sirajcmr
    Spectator
    As we use trasparet header in modern theme.. this black bar will come only when we scroll down in mobiles.. Appreciate your help
    April 8, 2016 at 10:45 am #41875
    H.K. Latiyan
    Participant
    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;

}}
    April 8, 2016 at 11:07 am #41882
    sirajcmr
    Spectator
    sweeet... I  will try this and udate you.. if this works, it will be a life saver for me :) Thank you
    April 9, 2016 at 7:49 am #42082
    H.K. Latiyan
    Participant
    Waiting for confirmation...
    April 9, 2016 at 8:21 am #42088
    sirajcmr
    Spectator
    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
    April 9, 2016 at 8:24 am #42089
    sirajcmr
    Spectator
    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 :)
    April 9, 2016 at 10:51 am #42106
    H.K. Latiyan
    Participant
    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
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Hide Fixed header only in responsive mode’ is closed to new replies.