How to make square mobile logo full width?

Hi there,

could you take down the coming soon so i can take a look?
Also this image:
https://wings.jacksmcnamara.net/wp-admin/upload.php?item=290

can you share from the media library URL :)

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

You can remove the Customizer > Layout > Header --> Mobile Header Logo
Then add this CSS:

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

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

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

I would suggest enabling the Off Canvas Panel for the mobile menu:

https://docs.generatepress.com/article/off-canvas-panel-overview/

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!

You can remove the Customizer > Layout > Header –> Mobile Header Logo

Just remove the Logo from here but keep the Mobile Header Enabled :)

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

Aah sorry - when i check the site you had added the Logo in the page content with it set to display only on mobile. Hmmm....

So lets get the image where we need it.

Create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add this to its content - make sure the image URL is correct:

<div class="mobile-large-logo hide-on-desktop">
    <img src="https://wings.jacksmcnamara.net/wp-content/uploads/2020/01/purple-ring-logo-final.jpg" alt="Logo with purple background">
</div>

Select the after_header hook from the list.
Set Display Rules > Entire Site

And in the CSS provided above - remove this:

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

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.

Edit the first line of the HTML to include the hide-on-tablet class ie.

<div class="mobile-large-logo hide-on-desktop hide-on-tablet">

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.

Try this to resize the logo on tablet devices:

@media (max-width: 1024px) {
    .site-logo {
        max-width: 200px !important;
    }
}

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

Just bumping this thread in case you didn't see my last message - the fix you suggested didn't work, in table view the menu still slides behind the logo. Any thoughts? Is there an easy way to get it to switch from the desktop menu to the mobile menu toggle?

Sorry not sure how this slipped past our system. That CSS should work - you may just need to reduced the 200px

In Customizer > Layout > Primary Navigation you can set the Mobile Menu Breakpoint - increase this to have the Mobile menu appear on larger screens.