Redesigned Header/Navigation like VeryWellFit

Hi there,

It's quite complicated to do that - maybe able to get somewhere close but will take some code.

Can you share a link to your current site, so i can see what you have so far?
You can edit your original topic and use the Site URL field to share the link privately.

Thank you David for the prompt response.

I have edited the topic and included my website, please do have a look.

This:

1. Install the GP Social Share plugin:
https://wordpress.org/plugins/gp-social-share-svg/

2. Enable the Off Canvas Panel and assign a Menu to it.
https://docs.generatepress.com/article/off-canvas-panel-overview/

3. Create another Menu without any menu items in this and assign it to the Primary Navigation.

4. Now we need to create 2 x Hook Elements:
https://docs.generatepress.com/article/hooks-element-overview/

Hook 1 - Social Share
Add the Social Share shortcode: [gp-social]
Select the inside_navigation hook
Check enable Shortcodes
Set Display Rules to Entire site

Hook 2 - Post Title:
Add this content:
<span class="nav-entry-title" itemprop="headline"><?php the_title() ?></span>
Select the inside_navigation hook
Check enable PHP
Set Display Rules to Entire site

Once thats done let me know so i can take a look at the CSS required to make it look right.

David, done that.

And please hide the post title for mobile devices.

Please check.

Try this CSS:

.main-navigation .main-nav,
.main-navigation.has-branding .menu-toggle {
    order: -3 !important;
}

.main-navigation .navigation-branding {
    order: -2;
    margin-right: unset;
}

.nav-entry-title {
    order: -1;
}

.main-navigation #gp-social-share {
    margin-left: auto;
    margin-right: 20px;
}

To hide title on mobile edit this HTML and include the hide-on-mobile class

<span class="nav-entry-title hide-on-mobile" itemprop="headline"><?php the_title() ?></span>

Looking much better now.

But,

1. the navigation is splitting into two rows in mobile and tablet view.

2. the logo is getting too small on mobile.

3. Need a vertical line of around 2px between logo and post title distinct them.

4. And how can a style the post title with CSS?

1. Add this CSS:

@media (max-width: 768px) {
    #primary-menu {
        flex-basis: 0
    }
}

2. in Customizer > Layout > Primary Navigation - increase the Mobile Menu Item height.

3. Edit this CSS to include the padding and border properties:

.nav-entry-title {
    order: -1;
    padding-left: 10px;
    border-left: 2px solid #000;  
}

4. same as point 3

David, we are almost there.

I just wanted to ask can we replicate the same as [verywellfit.com], where the post title comes on the navigation bar only on the scroll.

Can you enable Customizer > Layout > Sticky Navigation - then i can take a look.

Done that.

Add this CSS:

.main-navigation:not(.navigation-stick) .nav-entry-title {
    display: none;
}