Default menu fills entire page when width is >1230px

Hi there!

It looks like you have an empty menu set as your site’s “Secondary Menu” which is causing the overlay between the white line and the “Menu” text.

To remove or edit this menu, navigate to Appearance > Menus in your WP Admin area.

You can see custom menus that you’ve set up on the right side of this page and, under “Menu Settings,” you can check the location that a menu has been assigned.

Select each of your menus from the top of the page until you find the menu that has been assigned as the site’s “Secondary Menu.”

From here, you can either “Delete Menu” or add select items from the left to add to this menu.

If you check the Edin theme’s demo site, you’ll find an example of what the secondary menu looks like at the very top of the menu dropdown:

https://edindemo.wordpress.com/

Let me know if that helps out or if you have any extra questions.

Hi Siobhan,

Adding a secondary menu does fix the issue with the white line (and adds some good extra functionality!), but I’m still keen to have the menu not cover the entire browser window on click. Is there any way to cap its height so that people can still see the that the page is still “behind” the menu, or make it so that people can still scroll the page when the menu is open?

Also, and let me know if this needs a separate thread, how do I control the hover color for the menu items?

Thanks,
Lou

Hi Lou. ??

It is possible to prevent the height taking up 100% of screen’s height on desktop devices with some custom CSS.

Enter the following snippet via Jetpack’s CSS editor or the style.css file of your child theme:

.navigation-wrapper {
    height: inherit;
    overflow-y: hidden;
}

Also, and let me know if this needs a separate thread, how do I control the hover color for the menu items?

The following snippet will change the colour of the menu links when they’re hovered over, tabbed to via the keyboard, or active:

.primary-navigation .menu-primary > ul > li > a:hover, .primary-navigation .menu-primary > ul > li > a:focus, .primary-navigation .menu-primary > ul > li > a:active {
color: #663399;
}

You can change the value of #663399 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values.

Here’s an example of a site that I’ve used before:

https://www.color-hex.com/

In addition, you can change the colour of the menu link’s bottom border when hovered over by adding border-bottom-color: #663399; to the above snippet:

.primary-navigation .menu-primary > ul > li > a:hover, .primary-navigation .menu-primary > ul > li > a:focus, .primary-navigation .menu-primary > ul > li > a:active {
color: #663399;
border-bottom-color: #663399;
}

Hope that’s helpful! Let me know if extra questions come up.

Thank you!

Changing the border-bottom-color on hover gives me a strange effect though: the white line below remains visible on hover, but the new color line appears right below it.

Hi @lwertz,

I just spotted the following CSS, which is adding that little bit of extra white to the bottom border:

.primary-navigation .menu-primary > ul > li > a:before {
   background: #FFF;
}

You can override this by adding the following CSS to either Jetpack’s custom CSS editor or your child theme’s style.css file:

.primary-navigation .menu-primary > ul > li > a:before {
   background: #F2B705;
}

Give that a try and post back here if questions come up.