Move main menu to top of screen

Question

Move main menu to top of screen

wordfool

2022年5月10日 06:53

I'm using the Twenty Seventeen theme and my goal is to move the main menu (top nav) from its position under the header image to the very top of the page directly over the header image (transparent background), but there seems to be a lot of javascript in addition to css involved in positioning the menu and making it sticky when scrolling.

Can someone point me in the direction of the specific js files/functions that control and calculate the menu position on the homepage and secondary pages? It would also be useful to know the css lines that control this to check I have them all. Every time I think I've got the js and css covered the result is still buggy so I'm obviously missing something. Thanks.

Topic theme-twenty-seventeen css Wordpress javascript

Category Web

Phil · Accepted Answer · 2022年5月10日 06:53

This is a two step solution:

Install plugin "Options for Twenty Seventeen" (Link)
Add the following CSS to "Design" > "Customizer" > "Additional CSS"

.navigation-top {
    position: fixed;
    bottom: auto;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
}

.custom-header {
    padding-top: 50px;
}

Uladzislau Sauka · Accepted Answer · 2018年4月9日 23:11

1

Uladzislau Sauka answered at 2018年4月9日 23:11

@media screen and (min-width: 48em){
    .home .navigation-top {
        top: 0;
        bottom:auto;
    }
}

Brian · Accepted Answer · 2017年10月11日 14:47

1

Brian answered at 2017年10月11日 14:47

Try adding the following

.navigation-top {
  top: 14px;
}

Should move the menu to the top of the screen although this will affect all pages.

Move main menu to top of screen

About