[Resolved] Instagram App like header interface for mobile/tablets

[webyogi]

Hi Guys!

How do I achieve Instagram App like simple header structure/interface for mobile and tablet displays with:

1. Logo/Title in the center
2. Burger menu icon in the top left (which slides up the full menu)
3. Call button top right

Thanks in advance.

[Leo]

Hi there,

You can likely use the mobile header option with some CSS for that:
https://docs.generatepress.com/article/mobile-header/

So you only want that for mobile/tablets?

Any chance you can link us to the page in question so I can see your current layout?

You can edit the original topic and use the private URL field.

Let me know 🙂

[webyogi]

updated the private url field. Kindly advise.

[Leo]

Can you add the phone in first?
https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

[webyogi]

ok, lemme try adding the phone. back in a jiffy.

[webyogi]

Added the phone. Now how do I get:

1. Logo/Title in the center
2. Burger menu icon in the top left (which slides up the full menu)
3. Call button top right

[Leo]

Add this CSS:

.main-navigation.has-branding .menu-toggle {
    order: -1;
}

Then modify this:

.whg-call-btn {
    background-color: inherit;
}

to this:

.whg-call-btn {
    background-color: inherit;
    order: 1;
}

[webyogi]

Brilliant! All great now.

Although one small problem – sticky header/navigation, the order is messed up when you scroll down.

Btw I had added this to center the title text:

.navigation-branding {
margin: 0 auto;
}

[Leo]

Add this as well:

.main-navigation.has-branding .menu-toggle, .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    order: -1;
}

[webyogi]

Simple, elegant and brilliant !!!

Thank you so much.

[Leo]

Glad I could help 🙂

[Author]

Posts