Archived topic

Customizing Mobile Header

9 replies · Started by Derek on February 27, 2019

Viewing posts 1–10 of 10

February 27, 2019 at 2:47 pm #823830

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!

February 27, 2019 at 5:54 pm #823943

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 :)

February 27, 2019 at 11:09 pm #824080

Thanks, Leo.

I have activated it.

February 28, 2019 at 3:21 am #824247

Hi there,

try this CSS:

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

February 28, 2019 at 10:35 am #824799

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!

February 28, 2019 at 2:19 pm #825005

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

March 1, 2019 at 11:52 am #825935

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

March 1, 2019 at 11:28 pm #826227

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

March 2, 2019 at 1:42 pm #826830

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.

March 2, 2019 at 7:11 pm #826960

Glad we could help!

This archived topic is closed to new replies.

Start building better websites today.