Similar layaout of navbar and page hero

[sigreo]

Hi!
How can i get and put in my website the same design of the navbar and page hero of that website www. pau.ninja, from default generatepress template?

Greethings

[Leo]

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 🙂

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

[sigreo]

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

[Leo]

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 🙂

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

[sigreo]

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.

[Tom]

Hi there,

What if you add this?:

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

Let me know 🙂

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

[sigreo]

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

[Leo]

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

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

[sigreo]

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?

[Leo]

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/

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

[sigreo]

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/

[Leo]

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

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

[sigreo]

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!

[sigreo]

Resolved! Thanks!

[Leo]

No problem 🙂

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

[Author]

Posts