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

[Jacks McNamara]

Hello, thank you for your wonderful theme, I have used it on many websites.

I have been searching and searching the support forums and trying many things, but I can’t find the answer to my question, so I’m posting it here.

I am currently building a website where the desktop view uses this tutorial to create a split nav menu with a centered logo: https://docs.generatepress.com/article/centering-logo-navigation/.
It worked great, thank you!

The staging website I am building is at https://wings.jacksmcnamara.net.

I am trying to figure out if I can create a mobile header like this example from another website: https://wings.jacksmcnamara.net/wp-content/uploads/2020/01/unnamed-4.jpg. I don’t need to have all the social media icons, just the square logo as the header, and either the menu like they have it – floating right on top of the image – or it could go under the logo too.

The image I want to use for my mobile logo is this: https://wings.jacksmcnamara.net/wp-admin/upload.php?item=290

Thank you for any help!!!

oh – also – since I used your split menu/centered logo tutorial, my mobile menu has my logo in the middle of it. Is there a way to get rid of that?

[David]

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 🙂

[Jacks McNamara]

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

[David]

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/

[Jacks McNamara]

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!

[David]

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

Just remove the Logo from here but keep the Mobile Header Enabled 🙂

[Jacks McNamara]

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

[David]

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;
}

[Jacks McNamara]

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.

[David]

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">

[Jacks McNamara]

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.

[David]

Try this to resize the logo on tablet devices:

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

[Jacks McNamara]

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

[Jacks McNamara]

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?

[David]

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.

[Author]

Posts