[Support request] Redesigned Header/Navigation like VeryWellFit

Home Forums Support Redesigned Header/Navigation like VeryWellFit

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1144379
    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

    #1144530
    David
    Staff
    Customer Support

    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.

    #1144774
    Azman

    Thank you David for the prompt response.

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

    #1145534
    David
    Staff
    Customer Support

    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.

    #1146569
    Azman

    David, done that.

    And please hide the post title for mobile devices.

    Please check.

    #1146741
    David
    Staff
    Customer Support

    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>

    #1147084
    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?

    #1147113
    David
    Staff
    Customer Support

    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

    #1147406
    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.

    #1147412
    David
    Staff
    Customer Support

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

    #1148393
    Azman

    Done that.

    #1148413
    David
    Staff
    Customer Support

    Add this CSS:

    .main-navigation:not(.navigation-stick) .nav-entry-title {
        display: none;
    }
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.