Need navigation bar to stay on top of page while scrolling

  • Author
    Posts
  • #2691643

    pch44
    Member

    Hi, I would like the main navigation bar for my SELA themed website to stay on top, while someone scrolls down the page. Please let me know, thanks

    The blog I need help with is advertisingauditandresearch.com.

    #2691714

    siobhyb
    Staff

    Hi there!

    You could fix the menu bar to the very top of your page by adding the following snippet to the CSS panel of the WordPress.com Customizer:

    @media screen and (min-width: 768px) {
    .main-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 92.5%;
        z-index: 999999;
    }
    
    .admin-bar .main-navigation {
        top: 32px;
    }
    
    .site {
        margin-top: 58px;
    }
    }

    Give that a try and let me know if it works out for you. :)

    #2691745

    pch44
    Member

    Thank you, the code works well.

    Also, I was wondering if I could keep the original format of Sela and have both the title/header and navigation bar stay fixed at the top, while I scroll down the page. If you have any ideas, would appreciate it. Thanks again.

    #2691747

    siobhyb
    Staff

    You could try the following to fix the whole header to the very top of your site:

    @media screen and (min-width: 768px) {
    header#masthead {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
        left: 0;
    }
    
    .admin-bar header#masthead {
        top: 32px;
    }
    
    .site {
        margin-top: 214px;
    }
    }

    Let me know how that goes. :)

    #2691753

    pch44
    Member

    Ok thanks, I appreciate it. Works well

    #2691769

    siobhyb
    Staff

    Perfect! If you have any extra questions on customising your theme, please feel free to start another thread here or on our dedicated CSS forum:

    https://en.forums.wordpress.com/forum/css-customization

    Thanks!

The topic ‘Need navigation bar to stay on top of page while scrolling’ is closed to new replies.