Use Elementor Header Builder to replace Astra Theme Header

Word Count: 409
  • Post category:Clare Wood (22)
  • Post last modified:2022-07-02

Background

For unknown reason, the header built by Astra Header Builder was distorted for screen size in the region from around 1040 to 1024px. Both the desktop menu and tablet/mobile menu appeared at the same time and all of them were distorted in some ways.

This article documents the attempts to use Elementor to build the header. The tricky part is the design has a set of social icons at the bottom of the off-canvas panel. The standard Elementor Header Builder does not support adding widgets to the off-canvas panel. Finally, the improved Attempt 2 is adopted.

The sandbox dev.innovriver.com with the latest ClareWood development image is used for this exercise.

Attempt 1

  1. Create a section template which contains the Social widget. Get the shortcode for this saved template.
  2. Create a mobile menu and append a custom link at the end of the menu.
  3. In the label of the custom link above, add the shortcode of the saved template.
  4. Create a header using the Elementor Theme Builder.
  5. In functions.php or a site-specific plugin, add filter:
    add_filter('wp_nav_menu_items', 'do_shortcode');
  6. Check whether the template can be shown in the Elementor Header. If positive, style it to place at the designed location.
  7. Excellent! This approach works, thought some major CSS work is required.
  8. Follow up action:
    1. The structure of the Social widget looks complicated. The simpler Icon widget will be tried to replace the Social widget.
    2. A plugin will be developed to contain all the php, JS and CSS.

Attempt 2 (Adopted)

  1. Instead of putting the shortcode in the menu label as described in Attempt 1, the WP filter “wp_nav_menu_items” is used to add the template shortcode to the end of the mobile dropdown menu.
  2. This approach eliminates the unnecessary li tags generated around the icon elements in Attempt 1. So no JS is required to remove these tags.

Migration

To migrate the changes from Sandbox to the Dev server, take the following steps:

  1. Export then import the template “Off-canvas Social Icons – Mobile Menu”.
  2. Create CW Off Canvas Menu in Dev.
  3. Export then import the CW Header. Set the display condition to Entire Site.
  4. Install the “Ivr-Add Template to Off-canvas Menu” plugin in Dev.
  5. Check the front end and fix any issues – probably needs to change the template ID in plugin.
  6. Delete CW Mobile Menu (OCM) in Dev.
  7. Delete contents in Astra Header Builder in Dev.
  8. Remove the header section in Custom CSS in Dev.
Tags: ,