Hi,
This may be a simple thing, but I don't know how to fix it. I have a top menu, published in top4 (as the template model does) and then I have my main menu set to off canvas at a certain width.
This all looks fine on a phone, for example, but when I test in my browser by narrowing the browser window, the zenbars offcanvas icon appears overlapping with my top menu. I'm not sure why this is happening. It doesn't happen when I load the page on a phone, where the top menu just wraps to make room for the zenbars.

Here's a link:
66.147.244.57/~sscmjscm/wlscm/Joomla3/

Thanks in advance!
Janette

Hi Janette,

So you not seeing the issue on any mobile device just on the desktop?

If I suggest a style it will very likely change how it displays on the mobile devices

Cheers
Paul

Well, I don't have many mobile devices to test it on, so I'm just resizing the browser itself to see how it responds. On the phone it works fine. It's just in the narrower browser window, right after the breakpoint, that I get the overlap. Perhaps it's not really a problem since the issue will only be seen by people with a very specific screen width.

You could try

.btn.off-canvas-trigger {right: inherit;}

Cheers
Paul

I decided to fix it with a little padding:

#topwrap #top4 ul {padding-right: 15px;}

Seems to do the trick.

Thanks!
Janette

ah yes good choice

Cheers
Paul