Header Middle – logo, hamburger, cta, search, icons [ 6 ]

Header Middle – logo, hamburger, cta, search, icons

Use cases

1. Sites with lots of menu items or menu links with long character lengths
2. Sites that want a Call-to-action button in the header on every page separate from the menu

Component breakdown

1. Logo – template uses a standard photo module with the link set to site URL via field connection which can be swapped with an info box for a text business name, an icon with text, or an image with text – make sure that if you swap the photo module for an infobox the link is set to complete box and site URL via field connection
2. Hamburger Menu – template uses a PowerPack advanced menu module with responsive toggle hamburger set to be always visible. The responsive display is set to off-canvas from left and the hamburger/menu text alignment is also set to left.
   1. The menu module will appear empty unless you have a menu created and ready to select from the dropdown in the module – so make sure you create a menu first
   2. Feel free to change the menu alignment to the right or swap settings as needed.
   3. If you change the hamburger menu alignment to the right instead, make sure you update the off-canvas to appear from the right as well.
3. CTA – template uses a standard button module set to full width, taking up the space provided by the column its in. Feel free to swap this button with another module if needed.
4. Site Search – template uses a PowerPack search module set to its minimalist style, taking up the space provided by the column its in. Feel free to swap this search module with an HTML module containing a shortcode for the Search and Filter plugin if specific parameters are needed or if only a specific post type should be included in the search results.
5. Icons – template uses the standard icon group module – the icons can be added to/removed or swapped out for any other icons from the included icon libraries.

Custom code

This header layout doesn’t use any custom HTML or CSS.