Support » Theme: Twenty Seventeen » Sub Menus on Home Page

  • Resolved Rod Roark

    (@sunsetsystems)


    The Home page with the default Twenty Seventeen theme opens with the main menu at the bottom of the window. Sub-menus do not work well here because when you hover over, it drops down offscreen so you can’t see it without scrolling. Seems to me it should open upwards in this case. I wish to recommend fixing this.

    Also if anyone knows of an easy workaround I would be most grateful.

    • This topic was modified 4 years, 11 months ago by Rod Roark. Reason: Typo
Viewing 15 replies - 1 through 15 (of 20 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi @sunsetsystems,
    Where would you prefer the menu to be? It’s a design choice for the menu to be at the bottom of the screen. It’s entirely possible to move the menu, but as it’s not a bug we’ll need to know the new design.

    Thread Starter Rod Roark

    (@sunsetsystems)

    It would work just fine for me if the top menu is at the top of the window, as it is with pages other than the home page.

    However I do not dislike it at the bottom. I just feel that implementation is incomplete because it does not fully handle sub-menus. It would be more complete if sub-menus open upwards when the menu is closer to the bottom of the window than to the top.

    Hope that makes sense.

    • This reply was modified 4 years, 11 months ago by Rod Roark.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes that makes sense.

    To make this change properly:

    1. Create a Child Theme: https://codex.wordpress.org/Child_Themes
    2. Create a new file named ‘header.php’ and put it into your Child Theme folder
    3. Open that header.php file in your Child Theme folder and add this code to it: http://pastebin.com/mU88WS8s
    4. Add this to your Child Theme style.css file/ Additional CSS option:
      
      /* Make sure the navigation layer is on top of the image */
      .navigation-top {
          z-index: 4;
      }
      
      /* Remove the unnecessary margin created for the navigation menu on the header */
      .navigation-top:not(.site-navigation-fixed) ~ .custom-header {
          margin-bottom: 0 !important;
      }
      
      @media screen and (min-width: 48em) {
          /* Make sure the navigation menu sits at the top of the page */
          .navigation-top {
              bottom: auto;
              position: relative;
              top: 0;
          }
      }
      
      /* Move the video play button further down */
      .wp-custom-header .wp-custom-header-video-button {
          top: 6em;
      }
      

      [Code updated with final solution]

    • This reply was modified 4 years, 11 months ago by Andrew Nevins.
    • This reply was modified 4 years, 11 months ago by Andrew Nevins.
    • This reply was modified 4 years, 11 months ago by Andrew Nevins.
    • This reply was modified 4 years, 11 months ago by Andrew Nevins.
    • This reply was modified 4 years, 11 months ago by Andrew Nevins.
    Thread Starter Rod Roark

    (@sunsetsystems)

    This is excellent… moving the menu to the top. Thanks so much!

    Thread Starter Rod Roark

    (@sunsetsystems)

    Oops, one problem. The menu has disappeared completely for smaller screens (e.g. my Android phone).

    Rod

    I received this css from Andrew Nivins recently which puts the menu at the top on iphone ..

    Give it a try! I cannot find the link to his post so no guarantee that I have got it right!

    Geoff

    @media screen and (max-width: 767px) {

    .navigation-top,
    #masthead .wrap {
    position: static;
    }

    .site-branding,
    .custom-header-media {
    z-index: 0;
    }

    .main-navigation {
    left: 10%;
    position: absolute;
    top: 0;
    width: 80%;
    z-index: 1;
    }

    .main-navigation ~ a {
    display: inline-block;
    margin-top: 10px;
    }

    html .colors-custom.navigation-top .menu-toggle,
    html .navigation-top .menu-toggle {
    background: white;
    color: red;
    float: right;
    margin-top: 0.5em; /* orig 1em */
    z-index: 1;
    }

    .menu-menu-1-container {
    clear: both;
    }

    html .colors-custom .menu-toggle:focus,
    html .menu-toggle:focus {
    background: white;
    outline-color: black;
    }
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Just a second, @sunsetsystems would you be able to link us your website to see the issue?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thread Starter Rod Roark

    (@sunsetsystems)

    Thank you Andrew, looks like that fixed it!

    And thank you gcwp for jumping in. So nice to have this kind of support.

    Oh for what’s it’s worth the site is here:

    http://tst.23sandstone.com/

    • This reply was modified 4 years, 11 months ago by Rod Roark.
    Thread Starter Rod Roark

    (@sunsetsystems)

    I spoke too soon again. 🙂 For pages other than the home page, the menu appears at the top and overlays the header image, and is non-functional. It is replaced by a functional menu when you scroll down a bit.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Damn, try this instead:

    
    
    .navigation-top {
        z-index: 1;
    }
    
    .custom-header {
    	margin-bottom: 0 !important;
    }
    
    @media screen and (min-width: 48em) {
        .navigation-top {
            bottom: auto;
            position: relative;
            top: 0;
        }
    }
    
    .wp-custom-header .wp-custom-header-video-button {
        top: 6em;
    }
    
    Thread Starter Rod Roark

    (@sunsetsystems)

    That’s better, thanks. There’s a odd jump of the page content upward when you scroll down and the menu reappears, but this is definitely usable.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I see there’s an issue with your submenu, I’m sorry for the back and forth. It’s generally difficult to recommend CSS in this theme because of the differences in the header between pages. We have to tiptoe to make sure changes in one page don’t affect the other, on all screen sizes.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this code instead, to resolve the submenu issue:

    
    .navigation-top {
        z-index: 4;
    }
    
    .custom-header {
    	margin-bottom: 0 !important;
    }
    
    @media screen and (min-width: 48em) {
        .navigation-top {
            bottom: auto;
            position: relative;
            top: 0;
        }
    }
    
    .wp-custom-header .wp-custom-header-video-button {
        top: 6em;
    }
    

    I wasn’t however able to replicate the jump of content upwards. Could you point out a couple of example pages to switch between?

    Thread Starter Rod Roark

    (@sunsetsystems)

    It’s not about switching between pages. If you go for example to the About page (on a big screen) and scroll down slowly, you’ll see the content jump upwards when the menu reappears.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Sub Menus on Home Page’ is closed to new replies.