[Resolved] move nav menu above header on small screens and fix

Home Forums Support move nav menu above header on small screens and fix

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #65555
    theonetruevlad

    Things are coming along real nice, great theme, great plugins and useful forum.
    I have worked out some serious manoeuvring for different screen sizes that keeps everything looking good in the header with a right floating logo.
    A quick side question is, does having a lot of @media checks slow page loading by much?

    I have a fixed header until the screen becomes too narrow.
    At this point it would be ideal to move the main nav menu above the header and then fix only the nav menu allowing the header and content to scroll.
    Can that be done in css?

    Currently have this to fix the header


    @media
    screen and (min-height: 700px) and (min-width: 701px) {
    .custom-fixed-header {
    position: fixed
    top: 0;
    width: 100%;
    z-index: 2000;
    }
    .page-header-content {
    padding-top: 260px;
    }
    }

    Site is in a temporary holding location while I learn everything, can’t trash the current site 😉

    The Valentine Gallery

    cheers

    #65675
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Good job so far – media queries won’t make any noticeable difference to performance 🙂

    CSS doesn’t allow elements to move from one place to another, but you can make the navigation stick to the top once the user scrolls down to the point where it should disappear.

    More info here: http://generatepress.com/forums/topic/keep-menus-visable-with-scroll/#post-54453

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.