I’ve made a few small changes to the main menu, but I’m getting some overlapping issues when I resize the browser window. The logo and menu seem to overlap (my logo is about 340px wide).
The logo, menu and content don’t utilise 100% of the screen width at these lower resolutions. Am I able to change that? I’ve searched through the media queries but for the life of me can’t figure it out.
I’m working on my localhost so can’t send a link.
** Would be nice if we could upload images :)
Here’s a link to a dropbox shared image.
This is at 968px screen width. Notice the spacing on the sides, if I could get rid of that it would probably solve the issue.
You can solve this issue by switching to mobile menu, let’s say, at 975px.
To do so, in your WordPress directory please go to Enfold > Js and open Avia.js file and find following code in line 87
switchWidth = 767;
and change it to 975 or any other desired value
switchWidth = 975;