Offcanvas + Primary menus arrangement

Hi Raul,

1. In Customize > Layout > Header, set the top and bottom padding to 20px.

Then modify this code:

.site-logo, .navigation-branding {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

To this: 

.site-logo, .navigation-branding {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

2. I can see a close button on mobile. What are you seeing from your end? Can you try using a different browser or device?
3. Can you try this CSS:

header#masthead {
    z-index: 99999;
}

1. That works for mobile, but not for desktop. Moreover, I wanted the logo to be positioned in the top as before top: 4px;

2. Indeed. Probably it was just a cache issue on my mobile.

3. That method gets me two "x" losing buttons for mobile :(

1. This should work for desktop. Can you try clearing cache again? For the 4px top, you’ll need to add this as padding in Customize > Layout > Header. Try for instance 4px top and bottom padding.

3. Try this instead:

@media (max-width: 768px) {
    header#masthead {
        z-index: 99999;
    }

    button.slideout-exit.has-svg-icon {
        display: none;
    }
}

1. I don't use any caching or optimizing plugin yet. And I always use Ctrl+F5.
Have you checked the website on desktop and was okay for you?

3. Thanks, that works partially. Yet, I remain with a huge padding at the top. What can be done?

1. This is what it looks like from my end on desktop: https://share.getcloudapp.com/bLuBEJ2b

If you set the paddings as I’ve mentioned in my previous response, this is what it should look like: https://share.getcloudapp.com/qGuO2gGg

3. Try adding this:

@media (max-width: 768px) {
    nav#generate-slideout-menu.offside {
        top: 80px;
    }
}

1. My mistake. I had done that, but for mobile... Now, it's good.
3. Perfect.

Thank you very much for your help. Much appreciated!

You’re welcome Raul!