Good Morning Puntina,
Gotcha. The CSS above is intended to move the drop-down menus over a bit so they aren’t cut off on the right. If you’re wanting a separate menu system for mobile, we’ll want to use a plugin here. I would suggest trying the TinyNav plugin (https://wordpress.org/plugins/tinynav/). It replaces WordPress’ default menu system with a select one on smaller screens that’s easier to use.
Once you’ve installed and activated the plugin, there will be a new settings screen in the settings section of your WordPress dashboard. Here is what I would suggest adding there.
In the Custom ID/Class field, use .menu
In the screen size field, I would use 767 as the size where to apply this.
Next add this to your Custom CSS to add a bit of style to it:
#navigation .tinynav {
border: 2px solid #000000;
color: #000000;
font-size: 16px;
background: transparent;
-webkit-appearance: none;
border-radius: 0;
padding: 5px;
width: 90%;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 5%;
margin-right: 5%;
}
See if that doesn’t get you where you’d like to go. If you have any questions, let me know.
Have a great week,
Bill