Similar layaout of navbar and page hero

Hi there,

- For the header, activate the mobile header option first:
https://docs.generatepress.com/article/mobile-header/

Then change the breakpoint to as large as possible:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

Also activate navigation search;
https://docs.generatepress.com/article/navigation-search/

Once this is done, link me to the page in question and I'll provide the CSS :)

- For page hero, here is the setting he is using:
https://docs.generatepress.com/article/navigation-search/

Let me know if this helps :)

Thanks leo!: now it looks like this: https://orbitaaurea.com/

If you want the exact same style then disable the off-canvas panel first:
https://docs.generatepress.com/article/off-canvas-panel-overview/

Then add this CSS:

.main-navigation.has-branding .menu-toggle {
    order: -1;
}
.navigation-branding, .site-logo.mobile-header-logo {
    margin-left: auto;
}

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

Let me know :)

Thanks Leo again, but still don't looks similar in mobile phone, the navbar and about all the page "cover".https://orbitaaurea.com/index.php/for-customer-support/

And i also don't know how to show, the author, the date,... in the full cover of pages and post.
Thanks.

Hi there,

What if you add this?:

.menu-toggle, .main-navigation .mobile-bar-items a {
    padding-left: 20px;
}

Let me know :)

Hi Tom! Don't changes! it keeps the same! Thanks! What about the header? How can i add the author,date... to look like that page: https://pau .ninja

When you see this:
https://www.screencast.com/t/OGUVW8mH

That means there isn't enough room for the toggle, logo and search icon to be in one line.

A simple solution would be to remove the mobile menu label:
https://docs.generatepress.com/article/mobile-menu-label/

As for the header, check out these examples:
https://docs.generatepress.com/article/page-hero-examples/#example-2

Okk,Thanks! I resolved the navbar! althouth i would like. Navbar not move the content to the down.
Also i would like the part is not in the content don't look like navbar, is it possible? https://orbitaaurea.com/for-customer-support-2/

I like the second header, have i to write all the code in element header?

It should overlap the content if you activate the sticky mobile header (which is something the example site is using):
https://docs.generatepress.com/article/mobile-header/#sticky

The content part goes in the page hero content, the PHP and CSS need to be added separately:
Adding PHP: https://docs.generatepress.com/article/adding-php/
Adding CSS: https://docs.generatepress.com/article/adding-css/

Hi! Really thanks! Now all it works except the navbar. When i move to the down of the page and i come to the up the navbar shows different. I would like it keeps.

Thanks

https://orbitaaurea.com/

Try this as well:

.main-navigation.sticky-navigation-transition .mobile-bar-items a {
    line-height: 50px !important;
}
.main-navigation.sticky-navigation-transition .site-logo img {
    height: 50px !important;
}
.main-navigation.has-branding .menu-toggle, .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    order: -1;
}

Seriously, really thanks for your help!
Only last thing! i would like to move the title and the "tags" to the bottom of the header using the page hero you gave me.

Thanks again!

Resolved! Thanks!

No problem :)