Sticky Header on Desktop Only

  • How would I go about using CSS to create a sticky header on desktop only? I don’t want the header to be sticky on mobile devices.

    • This topic was modified 2 years, 10 months ago by Jan Dembowski.
Viewing 3 replies - 1 through 3 (of 3 total)

  • The answer depends on the theme you are using. If you give us a link to your site we could check if and how it is possible.

    Thread Starter cvanliew19

    (@cvanliew19)

    My website is privated but I’m using the Generate press free theme.

    Okay @cvanliew19

    try something like bellow

    #header { 
    position: fixed;
    background: #000; 
    color: #fff; 
    padding: 20px; 
    margin: 0;
    transition: left 0.5s;
}

@media all and (max-width: 780px){
    #header {
        position:inherit;
    }
}

    #header will be your header id or class

    and let me know if anything else

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Sticky Header on Desktop Only’ is closed to new replies.

Tags