I want a clean look for the menu across the site, so I have arranged all of the Main Navigation pages into a dropdown whose page title is simply "+." The URL slug for this page is "/menu." It looks great on a desktop because, at the top of each page, there is simply a plus sign that, when you mouse over, shows a nice box with the menu items.

 

The issue is, when you are on mobile that initial navigation icon is already simplified, so there ends up being an awkward extra step. When you click the mobile navigation icon, the screen that comes up shows the plus sign and an arrow that you then have to tap in order to bring up the whole menu. Is there a way to eliminate that intermediary tap on mobile?

 

The goal is to modify the mobile menu so that when the mobile navigation icon is tapped, it directly displays the menu items without the extra step of hitting the "+" sign by potentially making it detect a tap on the mobile navigation icon and automatically expand the menu items...?

 

OR Happy to just hide the plus sign on mobile?

 

Any help so appreciated. I am a beginner when it comes to coding. Thanks in advance!