Using Block Elements to Create Header

[Jean]

Hello!
Trying to make a custom header with the blocks element. I am not using a hero image- just want to custom-make the logo navigation area to look similar to damndelicious.net.

-How do I get my social icons above the navigation menu so that they share the same space as the logo?

-How do I get the search bar inserted into the header if using the block element (hooking into header).

Thanks so much!

[Tom]

Hi there,

Right now Block Elements aren’t advanced enough for headers like this, as there is no navigation block.

What you could try to do is build a shortcode for the navigation, then build the header layout using GenerateBlocks:

add_shortcode( 'custom_gp_navigation', function() {
    ob_start();

    if ( function_exists( 'generate_navigation_position' ) ) {
        generate_navigation_position();
    }

    return ob_get_clean();
} );

Then use [custom_gp_navigation] in your Block Element layout.

Let us know 🙂

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

[Jean]

Thanks for the reply!
This didn’t work but probably due to my error.

I pasted the shortcode into simple CSS while in Customize, and put [custom_gp_navigation] into the block element layout where I wanted the navigation to be.
Did I need to put the shortcode somewhere else? 🙂

[Tom]

That PHP should be added using one of these methods: https://docs.generatepress.com/article/adding-php/

Then the shortcode should work in a Shortcode block in the editor.

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

[Jean]

Thanks! This worked. However, I have not yet learned how to custom make my primary navigation. Is this what is next? If so, how do I get it to appear? 🙂
If this request goes beyond the bounds of the free help of this forum, please contact me w/ the details attached because I would pay. Thanks again.

[Tom]

This might help: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/

Let us know 🙂

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

[Alirio]

Using Block Elements to Create Header
https://generatepress.com/forums/topic/using-block-elements-to-create-header/

Hi GP Team. I tried this but unfortunately, it didn’t work for me. Here’s what I did:

I added the code above with Code Snippets.
I added a new Block Element and set to Site Header block type. Location Entire Site.
I ddded a Container and a 3-column Grid.
1st Column: text (my site’s name).
2nd Column: WooCommerce Product Search block.
3rd Column: shortcode block with the [custom_gp_navigation] shorcode.

When publishing, I got the following error: Publishing failed. The response is not a valid JSON response.

When I view the pages, I see the following error: Warning: Use of undefined constant ob_start – assumed ‘ob_start’ (this will throw an Error in a future version of PHP) in /home/ithrive5/public_html/shop/wp-content/plugins/code-snippets/php/snippet-ops.php(446) : eval()’d code on line 2

I added the ” around ob_start to the script. The error is gone, but still, the format in which the header shows is terrible. Now I’m lost.

Any ideas? Thank you!

Rio

[Tom]

Sorry about that! Can you try the updated code?: https://generatepress.com/forums/topic/using-block-elements-to-create-header/#post-1485848

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

[Author]

Posts