[Resolved] Centering Mobile Logo, Styles Stopped Working

[Josh]

I have a site where I had the mobile logo centered, with the size progressively adjusting gracefully as the screen size narrowed. The code (see below) was working fine on earlier versions of GP and GP Premium (sorry, did not track the version numbers).

I just pulled the site up on my local and upgraded to the latest versions of GP (1.4) and GP Premium (1.5.2).

Now the mobile logo is:

1) no longer centering with the existing code, and
2) is not resizing properly as the screen narrows

Did something in the GP code change since the last time this was working?

Is there a new approach to handling the mobile header and logos?

I have three projects going where I need to get the mobile header sorted. Thanks guys!

Examples:

768px:
https://imgur.com/IHhUeeV

652px:
https://imgur.com/y6gamAm

420px:
https://imgur.com/THBUE2F

Code:

/* Mobile Navigation, styles */
@media (max-width: 1145px) {
    
    #mobile-header {       
        padding-top: 17px;
        padding-bottom: 17px;
        background-color: #E3E5ED;
        border-bottom: 2px solid black;
        text-align: center;
    }

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

    #mobile-header .main-nav ul li a, 
    #mobile-header .menu-toggle, 
    #mobile-header .mobile-bar-items a {
        float: none
    }

    #mobile-header .mobile-header-logo {
        float: none;
    }

     /* Mobile Menu, styles */
    #mobile-menu ul li {
        background-color: black;
    }

 /* Mobile Logo Size 768px */
    .mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
        margin-bottom: 20px;
        height: 60px;        
}

@media (max-width: 652px) {
	
     /* Mobile Logo Size 652px */
    .mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
        margin-bottom: 20px;
        height: 50px;
    }
    
}

@media (max-width: 550px) {
 	
     /* Mobile Logo Size 550px */
    .mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
        margin-bottom: 20px;
        height: 45px;
    }
    
}

@media (max-width: 500px) {
 	
     /* Mobile Logo Size 500px */
    .mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
        margin-bottom: 20px;
        height: 38px;
    }
    
}

@media (max-width: 420px) {
 	
     /* Mobile Logo Size 420px */
    .mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
        margin-bottom: 20px;
        height: 33px;
    }
    
}

@media (max-width: 370px) {
 	
     /* Mobile Logo Size 370px */
    .mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
        margin-bottom: 20px;
        height: 29px;
    }
    
}

@media (max-width: 330px) {
 	
     /* Mobile Logo Size 330px */
    .mobile-header-navigation .mobile-header-logo, .mobile-header-navigation .mobile-header-logo img {
        margin-bottom: 20px;
        height: 25px;
    }
    
}

[Leo]

Hi there,

I’m assuming you are using the mobile header logo?

If so this should be the CSS: https://docs.generatepress.com/article/centering-logo-mobile-header/

If not can you link us to the site? It’s hard to see what the problem is by looking at the code.

Thanks!

[Josh]

Hi Leo, thanks for the prompt reply.

The project is on my localhost so I could not easily link you.

Yes, I was using the mobile header logo. The issues with the code that you gave me above are:

– by using absolute positioning – the mobile toggle button pops up over the logo so that they overlap
– control over sizing, positioning and spacing in the mobile header gets complicated

I ended up going with a different solution for the site header using Elementor Pro:

– Hide the .site-header and #mobile-header using CSS
– Turn off the primary navigation entirely in the Customizer
– Turn off the Mobile Header entirely in the Customizer
– Create a desktop header section in Elementor, set HTML tag as <header>, save as a Library item
– Create a mobile header section in Elementor, set HTML tag as <header>, save as a Library item
– Set the desktop header library section to hide on Tablet and Mobile
– Set the mobile header library section to hide on Desktop
– Create a section with an Elementor Nav Menu for the primary nav, HTML tag <nav>, save as Library item
– Get the shortcodes for both mobile header and desktop header in Elementor Library
– Put both shortcodes on the Before Header hook in GP Hooks

Now I can use Elementor to style the header library items and the nav menu library item exactly the way I need them.

Here’s the end result – this is what I was trying to do with the GP header and menu:

Desktop:
https://imgur.com/zSmlhSz

768:
https://imgur.com/lUzg58r

420:
https://imgur.com/HUydnL1

And here’s the CSS to hide the GP headers:

/* GP Site Header, hide */
.site-header {
      display: none !important;
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
    #mobile-header {
           display:  none !important;
    }
}

Here’s the reason why this scenario is so important:

Many company and project names are long. This makes the horizontal banner logo wide.

So when the wide banner logo shrinks to table and desktop, it responsively shrinks down to a tiny size unreadable.

That means we need to create an alternate logo for device sizes that will be readable on the smaller screens (hence the need for the GP Mobile Menu)

With the longer names, you can only make it so narrow. Yes, its possible for many logos to make a square (badge) version – but in some cases, that’s more difficult – and there are times when either the client does not want the badge version, or it just doesn’t work out aesthetically to use one.

Because you can only go so narrow with the mobile logo – that means the mobile toggle button needs to go underneath the mobile logo, stacked (see 768 / 420 screen shots above). It won’t work to put it to the right or left.

And that means that the absolutely positioned solution you are providing here gets to be a PITA. At least the way you have it in the documentation.

I’m glad I found a solution that works. GP is amazing on its own, and it’s a killer combination with Elementor.

But I do think GP should be able to handle this super common situation without so much hassle. Not everyone is going to be using Elementor or another page builder that is capable of the solution I used here.

GP mobile header solution needs to be more flexible imo. Thanks the help, thanks for listening!

[Leo]

Glad you got it working and thank for the suggestion!

If we receive more similar suggestions we will for sure have a deeper look 🙂

Thanks!

[Author]

Posts