[Support request] Redesigned Header/Navigation like VeryWellFit

[Azman]

I want to have the header similar to – https://www.verywellfit.com/ten-steps-to-a-healthy-new-year-2507105

Burger menu -> Logo -> Post/Page Title -> Social Profiles

Basically, I want to replicate the header of verywellfit.com

Please help!!

TIA
-Azman

[David]

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.

[Azman]

Thank you David for the prompt response.

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

[David]

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.

[Azman]

David, done that.

And please hide the post title for mobile devices.

Please check.

[David]

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>

[Azman]

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?

[David]

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

[Azman]

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.

[David]

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

[Azman]

Done that.

[David]

Add this CSS:

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

[Author]

Posts