Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 7, 2014 at 10:55 am #206239
    oslpag

    I have the header for the website set to “Non-fixed Header with social Icons and Navigation” is it possible that it can be non-fixed on desktop and revert to fixed on iPad and tablets?

    thanks
    Phil

    January 7, 2014 at 1:19 pm #206291
    Yigit

    Hi oslpag!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 989px) {
.responsive #top #header {
position: fixed;
}}
@media only screen and (max-width: 989px) {
.responsive #top #main {
padding-top: 148px;
}}
@media only screen and (max-width: 480px) { .responsive #top #main {
padding-top: 176px;
}}

    Cheers!
    Yigit

    January 8, 2014 at 12:21 am #206532
    oslpag

    Hi

    I tried the code but it did not seem to work

    Phil

    January 8, 2014 at 1:34 am #206551
    Yigit

    Hi!

    Have you tried flushing browser cache after applying the code? If so, can you post the link to your website? It works fine on my installation

    Cheers!
    Yigit

    January 8, 2014 at 1:44 am #206560
    oslpag

    Hi

    I am so sorry I got the header types mixed up, I need it to be

    Desktop fixed
    Tablets non-fixed

    Sorry for the confusion

    Phil

    January 8, 2014 at 2:24 am #206578
    Josue

    Hey!

    Change the code to this:

    @media only screen and (max-width: 989px) {
.responsive #top #header {
position: static;
}}

    And set the header type to fixed.

    Cheers!
    Josue

    January 8, 2014 at 2:35 am #206585
    oslpag

    Works perfect, sorry for the confusion, you may now call me an idiot :-)

    Thanks again for the great fast support

    January 8, 2014 at 2:40 am #206591
    Josue

    Heh, you are welcome, glad we could help :)

    Regards,
    Josue

    May 14, 2014 at 9:46 am #264550
    Raleigh

    Thank you Josue – That code saved me a lot of time and worked great.

    So then the question becomes how do you get the sticky header on tablet WITHOUT the header-meta if you normally have it activated on desktop?

    Thanks! -Raleigh

    May 14, 2014 at 4:09 pm #264735
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 990px) {
#header_meta { 
display: none !important; }}

    Best regards,
    Yigit

    May 14, 2014 at 11:35 pm #264978
    Raleigh

    Thanks Yigit – That worked great! (I actually figured that out on my own late last night but didn’t have a chance to come back and post it here yet but I was going to!)

    Enfold support rocks! I see some others in here who do not agree with that but honestly as a developer myself I can say that the support I have seen from the kriesi team is a level above every other theme I have worked with in the past. Great job guys. Thanks. Love what you’re doing.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Fixed Header on iPad (tablets)’ is closed to new replies.