fixed header with CSS

  • Posted in : Responsy WP
  • jpolsgrove
    Participant
    30 October 2012 at 05:43
    #2038

    Is there any way to make the header (including logo, nav, and social icons) fixed using the css styles?

    jpolsgrove
    Participant
    30 October 2012 at 05:57
    #2039

    I’ve made it this far:
    .header {
    position:fixed;
    header-background:fixed;
    width: 100%;
    z-index:100;
    }

    But the body of the page has moved up underneath the header and some of the page content is being chopped off…

    ahmetsali
    Keymaster
    31 October 2012 at 14:56
    #2056

    Hi, try giving padding-top to div.middle as the header’s height.

    .middle { padding-top: 150px; }
    jpolsgrove
    Participant
    31 October 2012 at 18:15
    #2064

    is there a way to hide the logo and social icons when it’s viewed on a mobile device?

    ahmetsali
    Keymaster
    1 November 2012 at 16:42
    #2079

    Use the custom css code below to hide the logo and social icons on mobile devices;

    @media (max-width: 480px) {
   #logo, .header .social { display: none; }
}
    media991
    Participant
    3 December 2012 at 08:00
    #2610

    The fixed menu is a great idea, is there a way to disable the fixed menu for mobile devices instead of removing the logos etc?

    ahmetsali
    Keymaster
    3 December 2012 at 08:04
    #2611

    Hi, try adding this custom css;

    @media (max-width: 768px) {
   .header { position: static; }
}
    media991
    Participant
    3 December 2012 at 08:58
    #2612

    Thanks for the super fast response, it works perfectly! Great support!

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘Responsy WP’ is closed to new topics and replies.