[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
  • #65555

    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

    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


    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.