0

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

  • If you could provide a link to your site with this it would be easier to debug :) – Picard May 8 '17 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 May 9 '17 at 12:06
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;
   }
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.