Skip to content

Header Simple – logo, hamburger, search [ 2 ]

Category: | Components: , ,

Template Details

Header Simple – logo, hamburger, search

Use cases

  1. Sites with lots of menu items or menu links with long character lengths
  2. Sites with lots of pages or posts that need site search functionality

Top Bars

Pair Site Header [ 2 ] with a top bar for additional elements: Top Bar1

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 the right and the hamburger/menu text alignment is also set to right.
    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 left or swap settings as needed.
    3. If you change the hamburger menu alignment to the left instead, make sure you update the off-canvas to appear from the left as well.
  3. Site Search – template uses a PowerPack search module set to its classic 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.

Custom code

This header layout doesn’t use any custom HTML or CSS, however, the top bar in the site package uses custom HTML and CSS and instructions on how to use/make adjustments to these are discussed on the template post for the individual top bar

How to Use

Download & Import Templates

  1. Choose one of the available template packages to download from the sidebar to the right
  2. Click the button to download the .xml for the desired template package
  3. Go to the site you want to import the template on, once you've installed GD Core and set up all the required plugins
  4. Go to the dashboard > tools > import - then at the bottom, under WordPress click "install now" > then click "run importer"
  5. Select your downloaded template package .xml from the "choose file" button > then click "upload file and import"

Apply Templates to Layouts


Feel free to adjust the widths of the columns to work with whatever changes you make to the template's components.

Make sure to check these adjustments on tablet and mobile responsive views as well to make sure the layouts appear correct on all screen sizes.

Table of Contents
    Add a header to begin generating the table of contents
    Scroll To Top