Astra Theme – Mobile Navigation How To Make The Drop Down Navigation Bar Scrollable

Mobile Menu Not Scrolling on Astra Theme?

Recently, I was working on a website that had the Astra WordPress Theme along with Elementor Page Builder plugin builder.

Everything was fine until I started to work on and edit the mobile navigation.

This particular client had sub categories or a drop down sub navigation menu displaying under the SHOP main navigation item with approximately 50 categories.

Each time we would select the Shop drop down then attempt to scroll down to view more categories, the navigation would disappear on mobile.

We created a separate menu called “Off Canvas Menu” under Appearance –> Menus –> Create New Menu.  Then ASSIGNED this menu ONLY to the “Off Canvas” Selection at the bottom checkboxes below the menu to assign only this menu to this area.

We added our menu items and the SHOP then added the sub categories below the shop.

We then clicked on Appearance –> Customize –> Header Builder and at the bottom left of this new screen you will see the option to select DESKTOP ICON – TABLET ICON and MOBILE ICON.

We selected both the TABLET and MOBILE icons and removed the PRIMARY MENU that was assigned to the OFF CANVAS MENU on the right side of the screen. Simply click below the text on the right called PRIMARY MENU and you will see a + sign then you can ADD the new OFF CANVAS menu to the OFF CANVAS section. You will want to REMOVE the PRIMARY MENU from this location.

So now you have the PRIMARY MENU on desktop and the OFF CANVAS MENU on tablet and mobile devices. You do not necessarily need to do it this way but we are able to control the mobile menu by itself as this client also wanted a search bar at the top of the menu and on our desktop version the search is last in the list on the menu.

Next we head over to  Appearance –> Customize –> Additional CSS and add the following code:

/* mobile sub nav scroll */
.ast-header-break-point .main-header-menu .sub-menu {
z-index:999999;
display:block;
height: 220px;
max-height: 220px;
width: 100%;
overflow-y: scroll;
}

Once you add this code above, save within the customizer and then view the site on mobile.

You should now see the mobile navigation and be able to select the SHOP (or whatever you are calling it main navigation item with the drop down categories) and see the categories below it and they are both scrollable and do not disappear when you scroll.

I was looking for a solution to this online and Astro was trying to point me over to a PAID ADD ON (of course you can’t blame them) but FREE is always better.

If you need help with this type of integration or just looking to have a beautiful, professional website developed feel free to contact After Dark Grafx the best website design company in San Diego (well, we had to say that).

Thank you,

James Byrne, Owner, Information Architect, USMC VET