Sub Menus on Home Page

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.

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 7 years, 11 months ago by Rod Roark.

Yes that makes sense.

To make this change properly:

1. Create a Child Theme: https://codex.www.ads-software.com/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: https://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 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.
• This reply was modified 7 years, 11 months ago by Andrew Nevins.

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

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;
}
}

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

@sunsetsystems, I see what you mean. I’ve updated the code: https://www.ads-software.com/support/topic/sub-menus-on-home-page/#post-8591682

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:

https://tst.23sandstone.com/

• This reply was modified 7 years, 11 months ago by Rod Roark.

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.

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;
}

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.

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.

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?

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.