[Resolved] Customizing Mobile Header

[Derek]

My apologies if this has been answered before. I’ve spent the last several hours trying to find a solution on the forums, but everything I have come across doesn’t quite work.

I am trying to customize the mobile header to:

1) Left align the hamburger menu

2) Center align the mobile logo, while also having it be very small (height of around 20px). When I select a very small logo it seems to disregard the image and make it larger.

3) Have a search bar float on the right (this is a nice to have, if it’s too complex I can live without it)

Here is what I am attempting to create – https://i.imgur.com/PMECyBV.jpg

Thanks in advance for your help!

GeneratePress 2.2.2

[Leo]

Hi there,

Can you activate the navigation search first?

Then we should be able to rearrange the items in the mobile header.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Derek]

Thanks, Leo.

I have activated it.

[David]

Hi there,

try this CSS:

#mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Derek]

Thanks, David! The menu, logo, and search are now ordered correctly.

One last small issue that I cannot seem to solve…

When I set the logo within the mobile header:

1) if I use my higher resolution logo (200x34px) it breaks the nav and pushes the search to line 2
or
2) if I use a lower resolution logo (100x17px) it is heavily pixelated.

How can I get a non-pixelated logo that doesn’t push the search to line 2?

Thanks!

[David]

Best thing would be to use an SVG image. You need the Safe SVG or SVG Support plugin to install one.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Derek]

Okay, I’ve got an SVG in there. But it’s still bumping the search to a 2nd line.

Looks like I might can do it by changing mobile header height to less than 60px, is that the best solution? or something else you’d recommend?

.mobile-header-navigation .mobile-header-logo img {
    height: 55px;
}

[Tom]

If it works with the design, then that CSS should be fine 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Derek]

Sounds good!

Thank you Tom, David, & Leo. I appreciate the help.

As a brief aside…I am coming over from building on Divi over the last 5 years (on multiple projects).

While this transition has been a nightmare (thanks to Divi), I cannot tell you how refreshingly optimized GP is. This is without question the best theme I’ve ever built on.

[Leo]

Glad we could help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts