[Resolved] How to make square mobile logo full width?

Shoot sorry about that, I meant to disable the coming soon. It’s disabled now. And sorry about the image! It’s here: https://wings.jacksmcnamara.net/wp-content/uploads/2020/01/purple-ring-logo-final.jpg

So I tried it and it didn’t work at all. I inserted the css and set up the off canvas panel, but as you’ll see, in mobile view there is no menu button, it still shows my regular desktop navigation. I’m guessing this is because I have the split header set up? Note: my usual site logo has a transparent background, so when I added your css I set the background color to be purple. That doesn’t show up either.

Here’s all my css:

.main-navigation {
border-bottom: 2px solid #fd992f;
}

.site-info a {
color: #f99b16;
}

***here’s the split header/centered logo css****

.inside-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.header-widget {
order: 10;
overflow: visible;
}

.nav-float-right .header-widget {
top: auto;
}

.nav-float-right .header-widget .widget {
padding-bottom: 0;
}

.site-branding,
.site-logo {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 200;
}
#mobile-header .mobile-bar-items {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
margin-left: auto;
}
#site-navigation {
float: none;
width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.main-navigation .menu-item-separator {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}

.main-navigation .menu-item-separator a {
font-size: 0;
background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
display: none !important;
}

@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}
*** here’s your css for the mobile header ***

@media (max-width: 768px) {
#mobile-header {
background-color: #3e243c;
position: relative;
z-index: 100;
border: 0;
}

#mobile-header .menu-toggle {
color: #fff;
}

#page {
margin-top: -80px;
}
}

thanks for any insights!

I took out the mobile logo, and now the background and the menu button show up, but there is no image displayed.

That worked! Except – it appears that if I am in tablet view (medium screen width, between desktop and mobile) I have both headers operating. The split header with centered logo, and the mobile menu with the full-width logo.

Thank you! So that worked, in terms of hiding the mobile logo while in tablet size view. However, one last question: in tablet view, the central menu items are kind of hidden behind the logo. Here’s a screenshot: https://wings.jacksmcnamara.net/wp-content/uploads/2020/02/Screen-Shot-2020-02-03-at-2.47.35-PM.png
Any thoughts on what I could do about this? I changed the mobile menu breakpoint in the customizer such that I thought I would be seeing the mobile menu button in tablet view, but that is not happening.

It didn’t work, in tablet view the menu still slides behind the logo