$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>theme twenty seventeen - Problem with submenu position when nav bar is at the bottom|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>theme twenty seventeen - Problem with submenu position when nav bar is at the bottom

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

    matteradmin8PV0评论

    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 32 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

    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.

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far