Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Add grid structure to header

Home Forums Support [Resolved] Add grid structure to header

Home Forums Support Add grid structure to header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #573348
    Ryan

    I was hoping to be able to copy and modify the header.php file to a child theme. I realize after going through support forum that this is not doable.

    So question. I would like to add a div with a grid class to the header. Like this:

    <header>
    <div grid-20>
       <div site-logo></div>
    </div>
    <div grid-60>
       <div inside-header>
          <nav></nav>
       </div>
    </div>
    <div grid-20>
    </div>
    </header>
    

    the design calls for the header nav to stay in the center at all times with logo to the left.

    So how can I add this structure into the generate_header_items function?

    GP Premium 1.6.2
    #573381
    Leo
    Staff
    Customer Support
    #573410
    Ryan

    Thanks Leo!

    This is interesting and might help. I would have to rewrite a lot of CSS and then instruct client not to mess with it. I am trying to keep additional plugins to a minimum.

    Using this method I have to add the main nav into the center section. The article method puts it in the right div when I need it in the middle div. if there is a shortcode to render the nav then it might work with some CSS tweaking.

    Prefer to inject the divs into the code.

    So, Is there a shortcode to render the main nav?
    What are the first steps that I would have to do to write a function that injects the divs?

    Here is a test of what I am trying to do (Which works well): http://104.254.95.130/~catapultwp/test-code.html

    #573634
    Leo
    Staff
    Customer Support

    Hmm no additional plugins are required with this method.

    Looks like you’ve already figured out?

    If all you want is a navigation logo and then the menu in the center, you shouldn’t need to use the hooks method.

    Or am I missing something?

    #575433
    Ryan

    Hey Leo,
    Sorry I keep bugging you about this – Yeah it works well here because I coded it to do that in HTML

    Here is what it actually looks like http://104.254.95.130/~catapultwp
    When I reduce to the browser the logo floats over the menu. The designer is being a real pain about it.

    #575577
    Leo
    Staff
    Customer Support

    Hmm to complete your current layout, I would just use this method:
    https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    Then set the navigation alignment to center.

    Let me know if this works better.

    #576198
    Ryan

    Thanks Leo – looks good. And thanks! But when resizing it floats below the menu – – any other suggestions

    ScreenCap

    Now I have to figure out a method to make the video background parallax… I am thinking using transparent png as the image and then add video background in CSS. Will see if that works.

    Thanks for sticking with me on this Leo. Just want it done and to get paid ๐Ÿ™‚

    #576242
    Leo
    Staff
    Customer Support

    Try increasing the breakpoint so that it switches to mobile mode before that happen:
    https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

    Let me know.

    #576285
    Ryan

    Thanks Leo!! Last Thing.

    How can I add a function to insert code after the page header tag? Trying to add background video…

    I have tried this:

    add_action( ‘generate-inside-page-header-content’, ‘home_page_video’ );
    function home_page_video() {
    if ( is_front_page() ) {
    ?>

    <video autoplay muted loop id=\’myVideo\’>
    <source src=\’http://104.254.95.130/~catapultwp/wp-content/uploads/2018/05/rivertemp2-1.mp4\’ type=\’video/mp4\’>
    Your browser does not support HTML5 video.
    </video>

    <?php
    }

    }

    #576424
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic for this question?

    I’ll mark this one as resolved now ๐Ÿ™‚

    Thanks!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.