Mobile Expanded - Menu Item Height; Menu scroll

[asdfrew]

Hi: I need help with two issues:

1. When the Hamburger menu is expanded - I want to reduce the height of the menu items, so more menu items and submenu items can be displayed
2. As you scroll down to view additional menu items this happens - When the hamburger goes off the top of the screen, the whole menu disappears. This prevents the user from seeing the menus and submenus towards the bottom

[rad]

Hi Ravi,

Thanks for reaching out.

1. It does seems to have many customization, for now, you can reduce its height by setting its margin to zero, with minimal padding

.x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    color: lightgray;
    margin: 0;
    padding: 5px;
}

2. The cause of that issues are these custom CSS (applied within @media).

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
    overflow-y: scroll;
}

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}

That’s the reason mobile menu fixed positioning is intentionally disabled on mobile. Because if it’s, it will will follow as you scroll hence you will never reach the items that are outside the viewport. And overflow-y: scroll; made it worst.

Thanks!

[asdfrew]

Hamburger Expanded Menu:
1: How do I control specifically the height of the sub-menu items
2. On Hover - how do I indent the menu item/change font
3. If there are more submenu items that fit on the screen - it stops scrolling - how do I display the submenu items on the bottom

Regular Desktop Menu:

1. How do I control the line height of the list of sub-menu items displayed on dropdown

[ruenel]

Hello Ravi,

Before anything else, when I check your site, I am seeing this:

The mobile menu items were broken or do not display properly simply because it has been affected with this custom css:

.x-navbar .x-nav > li > a {
    width: 135px;
    text-align: center;
    line-height: 2em;
    padding-right: 10px;
    padding-left: 10px;
}

If you are going to target the desktop menu, you must update your code first into this:

.x-navbar .desktop .x-nav > li > a {
    width: 135px;
    text-align: center;
    line-height: 2em;
    padding-right: 10px;
    padding-left: 10px;
}

• To control the line height of the expanded menu items, you will have to use this code:

.x-navbar .mobile .x-nav li>a {
    line-height: 1;
}

• To modify the font family on hove, please make use of this code:

.x-navbar .mobile .x-nav li>a:hover {
   font-family: arial, serif;
}

• If your menu is too long, please arrange it in menu items and sub menu items so that there will be enough space to the display other items. Normally it should scroll away as you scroll the page. It is no longer having that behavior because otf this code:

@media (max-width:1200px){
  .x-navbar-fixed-top,.x-navbar-fixed-left,.x-navbar-fixed-right{
    position:fixed;
  }
}

You can temporarily remove this to check its behavior.

• To control the line height of the sub menu for your desktop navigation, you use this code:

.x-navbar .mobile .x-nav .sub-menu li>a {
    line-height: 1;
}

Hope this helps.

[asdfrew]

Hi RueNel: I have two websites. I am currently sorting things out on HappySoulHungryMind.com since that is where I am adding a lot more pages. So, could you answer based on the css code in HappySoul. Thanks.

[ruenel]

Hello ravi,

1.) To control the height of the sub menu items, you use this code:

.x-navbar .mobile .x-nav .menu-item-has-children li>a {
    line-height: 1;
}

2.) To indent or change the font, you use this code:

.x-navbar .mobile .x-nav  li > a:hover,
.x-navbar .mobile .x-nav  li.curent-menu-item > a {
  font-family: "Arial", serif;
  margin-left: 10px;
}

3.) If your menu is too long, please arrange it in menu items and sub menu items so that there will be enough space to the display other items. Normally it should scroll away as you scroll the page. It is no longer having that behavior because otf this code:

@media (max-width:1200px){
  .x-navbar-fixed-top,.x-navbar-fixed-left,.x-navbar-fixed-right{
    position:fixed;
  }
}

You can temporarily remove this to check its behavior.

4.) To control the line height of the sub menu for your desktop navigation, you use this code:

.x-navbar .mobile .x-nav .sub-menu li>a {
    line-height: 1;
}

Hope this helps.

[asdfrew]

Thank you so much, RueNel, for being so patient and helping so well. Based on your suggestions, code, my menu issues are all solved. I appreciate your help!

[ruenel]

You’re most welcome Ravi!
We’re just glad we were able to help you out.