Instagram App like header interface for mobile/tablets

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

updated the private url field. Kindly advise.

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

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

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

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

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

Add this as well:

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

Simple, elegant and brilliant !!!

Thank you so much.

Glad I could help :)