Wide logo disables hamburger menu on mobile

Question

My logo is wider than the canvas default (360 x 100). As suggested elsewhere in the forum, I have used the following CSS to fix the header issues on mobile:

.device-xxs #logo img {
height: 55px;
margin-left: 35px;
margin-top: 20px;
margin-bottom: 15px;
}

so now the logo is properly centered on mobile. However, the hamburger icon (#primary-menu-trigger) is now unclickable (the logo is clicked instead), and no amount of fiddling with the z-index has made it work.

Preproduction website can be seen at: https://desarrollo-tecnologico.herokuapp.com/

Your help is appreciated.

SemiColonWeb · Accepted Answer

Hello,

We have just checked out your Website and the code appears to be correct, however the issue is that the Order of CSS in the <head> is incorrect. We have checked out your Combined CSS File and the css/responsive.css File appears to be added before the style.css File which causes an issue. Please make sure the CSS is added in the Same Order as in the Default Templates from the Package.

This should automatically fix this issue. Let us know if we can help you with anything else or if you find any further issues.