theme twenty seventeen - Problem with submenu position when nav bar is at the bottom

I'm using twenty seventeen theme on wordpress (writing a child theme) When the home page first loads the nav bar is at the bottom of the screen, but the sub menu opens downwards and is therefore hidden. I'd like it to fly upwards until the page has scrolled down. First, is there a simple way to change this that I'm perhaps missing? (because it seems like a basic thing, yet I can't find any answer anywhere) Or do I need to change a class on scroll using jquery? (in which case I am really feeling about in the dark.) Can anyone help me with this? Vik

I'm using twenty seventeen theme on wordpress (writing a child theme) When the home page first loads the nav bar is at the bottom of the screen, but the sub menu opens downwards and is therefore hidden. I'd like it to fly upwards until the page has scrolled down. First, is there a simple way to change this that I'm perhaps missing? (because it seems like a basic thing, yet I can't find any answer anywhere) Or do I need to change a class on scroll using jquery? (in which case I am really feeling about in the dark.) Can anyone help me with this? Vik

• theme-twenty-seventeen

Share Improve this question asked May 8, 2017 at 14:53 Vik MartinVik Martin 322 bronze badges 2

• If you could provide a link to your site with this it would be easier to debug :) – Picard Commented May 8, 2017 at 20:14
• Thanks for answering the url is thepicturepractice.co.uk/hat - (part finished site I am doing for someone else...) Thing is, though, this seems to be how twentyseventeen is actually designed rather than how I've set it up. Could it be that the theme isn't designed to have submenus? – Vik Martin Commented May 9, 2017 at 12:06

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

The easiest way would be to react to the change of classes assigned to the main menu bar - when it docks top - there's added class .site-navigation-fixed. Making it work fully is not so quick and easy process, especially when you do the edits in the Chrome developer tools :) You have to take care of the RWD version too.

I made some changes for you for a start:

@media screen and (min-width: 48em) {
   .navigation-top.site-navigation-fixed ul li:hover > ul,
   .navigation-top.site-navigation-fixed ul li.focus > ul {
       top: 100px;
   }
}

@media screen and (min-width: 48em) {
   .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
       left: -6.5em;
       right: auto;
       top: -100px;
   }
}

Assuming you know the size of the submenu:

body.home ul.sub-menu { top:-100px; }

If you have different submenus you can use menu-item-XXX id to be more speecific.