Help with making menu to scroll with page

  • Unknown's avatar
    findyoursoundtrack · Member ·

    Hi everyone. Would love if my primary menu scrolls down while the reader is scrolling instead of remaining in a static location at the top!

    Thanks for the help.

    The blog I need help with is: (visible only to logged in users)

  • livfor2day · Staff ·

    Try to add this to your custom CSS:

    .main-navigation {
     background-color: #eee;
     position: fixed;
     z-index: 10;
}

.site-main {
	position: relative;
}

.site-branding {
	padding: 10.2em 1.6em;
}

    The first section makes the menu fixed on the page and removes it from document flow. Giving it a background color makes the text of the page appear to scroll behind the menu and the z-index tells the browser to “stack” the menu on top of the other elements on the page.

    The second section causes the rest of the page to scroll relative to the menu and the third section changes the padding on top of the header allowing the background image to account for the space taken up by the menu.

    It changes the look of the header area just a bit in that the menu is no longer sitting on top of the background header image, but it accomplishes the task.

    Hope this helps!

  • Unknown's avatar
    findyoursoundtrack · Member ·

    This is amazing! Thank you very much.

  • The topic ‘Help with making menu to scroll with page’ is closed to new replies.