Header Store – logo, hamburger, search, cart, icons [ 2 ]

Category: Store Header | Components: Hamburger Menu, Logo, Product Search Bar, Store Icons

Template Details

Header Store – logo, hamburger, search, cart, icons

Use cases

Stores with lots of menu items or menu links with long character lengths
Stores that want product search to be easily accessible in the header on every page
Stores that use wishlists and want wishlist and cart icons in the header with the number of items in these beside the icons

Top Bars

Pair Store Header [ 2 ] with a top bar for additional elements: Top Bar3

Component breakdown

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
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.
- 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
Product Search – template uses the Ajax search bar widget module with the layout set to “search bar only”
Store Icons – template uses a custom HTML module with the wishlist and cart shortcode in it along with a bunch of common icons like the location and user icons which can be linked to pages like contact or account/login etc.

Custom code

This header layout uses custom HTML and CSS. If you click the HTML module, you’ll find the following code:

Note: This section contains HTML. Importing the template can cause the custom code to break – after importing the template, you will want to replace the HTML in the module with the fresh HTML below.

<div class="headone">
    <a class="socicon" href="#" target="_blank">
        <i class="fas fa-map-marker-alt"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fas fa-user"></i>
    </a>
    
    [ti_wishlist_products_counter]
    
<!-- EXTRA PRELOADED ICON LINKS ----

    <a class="socicon" href="tel:0000000000">
        <i class="fas fa-phone-alt"></i> 
    </a>
    
    <a class="socicon" href="sms:0000000000">
        <i class="fas fa-mobile-alt"></i>
    </a>
    
    <a class="socicon" href="mailto:email@site.com">
        <i class="fas fa-envelope"></i>
    </a>

    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-facebook-f"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-twitter"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-instagram"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-linkedin-in"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-pinterest-p"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-youtube"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-snapchat-ghost"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-twitch"></i>
    </a>
        
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-tiktok"></i>
    </a>
      
    <a class="socicon" href="#" target="_blank">
        //replace this string with any icon from
        fontawesome.com/icons
    </a> 
------------ -->

</div>

<div class="headtwo">
    [wpmenucart]
</div>

You can remove the wishlists shortcode if the customer is not using this feature on their site and you can use any of the preloaded icons in the commented out section to display icons as needed.
All items loaded in the div with the class “headone” will appear before the gray divider line, and all items loaded in the div with the class “headtwo” will appear after the gray divider line with the cart.
While in the builder, click the tools dropdown at the top left of the screen > then click Layout CSS / JavaScript – the CSS for the CSS styling applied to the custom HTML

.head-custom-icons .fl-html {
    display: flex;
    align-items: center;
    font-size: 15px;
    /*------uncomment for right align------*/
    /*justify-content: flex-start; */
    /*------uncomment for left align------*/
    justify-content: flex-end; 
    /*------uncomment for center align------*/
    /*justify-content: center; */
}
.head-custom-icons .fl-html a {
    /*change colors as needed ---
    --- remove color style to keep site's default link color*/
    color: #111111;
}
.head-custom-icons .fl-html a:hover {
    /*change colors as needed ---
    --- remove color style to keep site's default link hover color*/
    color: #444444;
}

/*------uncomment for cart on the left------*/
/* .headtwo {
    padding-right: 8px;
    margin-right: 8px;
    border-right: 1px solid #d6d6d6;
} */
/*------uncomment for cart on the right------*/
.headtwo {
    padding-left: 8px;
    margin-left: 8px;
    border-left: 1px solid #d6d6d6;
} 
.headone a, .headtwo a {
    margin: auto;
    padding: 0 4px;
}

/*-------CSS for styling the wishlists shortcode heart icon--------*/
a.wishlist_products_counter.top_wishlist-heart.top_wishlist-.no-txt.wishlist-counter-with-products:before {
    vertical-align: text-bottom;
    margin: 0;
}

WP Menu Cart Pro: Settings

The template is using the [wpmenucart] shortcode in the Custom HTML module along with the wishlist shortcode and store icons. You will need to make sure the following settings are in place in order for the menu to look right in the header template.

Go to dashboard > WooCommerce > Menu Cart Pro
Since the shotcode is being used in the template, you don’t need to select a menu to display cart in, unless requested in the footer or somewhere else
Check the box “always display cart“
Uncheck the box “use flyout“
Check the box to display cart icon
From dropdown “Contents of the menu cart item” select “items only” unless something else is requested

Color of WP Menu Cart Pro is controlled by the CSS above – you can remove the CSS by following the instructions in the commented out portions if you want to revert to using the site’s accent color for links OR you can replace the #111111 color in the CSS with a different color.

How to Use

Download & Import Templates

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

Step 1

Step 2

Apply Templates to Layouts

Header - New Themer Layout

Hover over "new" > click "themer layout"
Name the title "header" and make sure layout is set to "header" > click "add themer layout"
Then follow the regular steps of setting up a header where you choose whether the header will be sticky, shrink or overlay, and assign the header to the location of "entire site" unless stated otherwise
Publish the header layout, then launch beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Choose the package's header template and then select "replace existing layout"
Make your necessary adjustments to the header and then publish

Top Bar - Part Themer Layout

Hover over "new" > click "themer layout"
Name the title "top bar" and make sure layout is set to "part" > click "add themer layout"
For the position select "before header" and for the location select "entire site" unless stated otherwise
Publish the part layout, then launch beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Choose the package's top bar template that you want to use - refresh the layout without publishing it so that you can be sure any CSS that's included with the layout transfers over
If the layout has any custom CSS you will be able to see this and make adjustments to it from the tools dropdown in beaver builder > layout CSS/JavaScript
If the layout is using a custom HTML module, you will see commented out instructions inside the module for you to follow when making changes
Make your necessary adjustments to the top bar (like adding/removing icons or setting colors) and then publish

Footer - New Themer Layout

Hover over "new" > click "themer layout"
Name the title "footer" and make sure layout is set to "footer" > click "add themer layout"
Then assign the footer to the location of "entire site" unless stated otherwise
Publish the footer layout, then launch beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Choose the package's footer template and then select "replace existing layout"
Make your necessary adjustments to the footer and then publish

Hero - Page Layout

Open the homepage in beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Select the hero template that you downloaded and imported and make any necessary design changes - swap any hero images out for ones that are actually hosted on your site, change any colors and sizes as needed.

Posts - Archive Themer Layout

Hover over "new" > click "themer layout"
Name the title "Post Archive" and make sure layout is set to "Archive" > click "add themer layout"
For the location: change this to "post archive" OR "All Archives" - if you use all archives, then you wont have to create layouts for post categories or search pages or tag archives etc. (when creating a layout for all archives, its probably best to do it with the feed or grid layouts - tiles layout is better for just the post archive - if you want all archives to use the tiles layout you can, but just make sure all posts and pages that can be searched have featured images so that the tiles don’t look bad)
Publish the layout, then launch beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Select desired template > click "replace existing layout" - refresh the layout without publishing it so that you can be sure any CSS that's included with the layout transfers over
Make sure you "view as" the post archive or a category that has posts in it, so that you can see what you're styling
Make sure the module's content is always set to main query when you're in an archive themer layout
If the layout has any custom CSS you will be able to see this and make adjustments to it from the tools dropdown in beaver builder > layout CSS/JavaScript
If the layout is using a custom HTML module, you will see commented out instructions inside the module for you to follow when making changes
Proceed to style/include/exclude elements as needed and then publish

Posts - Singular Themer Layout

Hover over "new" > click "themer layout"
Name the title "Post Singular" and make sure layout is set to "Singular" > click "add themer layout"
For the location: change this to "post" > "all posts" - Do NOT set the location to "All Singular" since this applies to pages as well and can mess up the site
Publish the layout, then launch beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Select desired template > click "replace existing layout" - refresh the layout without publishing it so that you can be sure any CSS that's included with the layout transfers over
Make sure you "view as" a post that has content in it, so that you can see what you're styling
Make sure any text on the layout is set via field connection when you're in a singular themer layout, unless its text that must be repeated across all posts that share the layout
If the layout has any custom CSS you will be able to see this and make adjustments to it from the tools dropdown in beaver builder > layout CSS/JavaScript
If the layout is using a custom HTML module, you will see commented out instructions inside the module for you to follow when making changes
Proceed to style/include/exclude elements as needed and then publish

Products - Archive Themer Layout

Hover over "new" > click "themer layout"
Name the title "Product Archive" and make sure layout is set to "Archive" > click "add themer layout"
For the location: change this to "product archive" - add another location and change it to "product tag archive" - add a third location and change it to "product category archive"
Publish the layout, then launch beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Select desired template > click "replace existing layout" - refresh the layout without publishing it so that you can be sure any CSS that's included with the layout transfers over
Make sure you "view as" the product archive or category that has posts in it, so that you can see what you're styling
Make sure the module's content is always set to main query when you're in an archive themer layout
If the layout has any custom CSS you will be able to see this and make adjustments to it from the tools dropdown in beaver builder > layout CSS/JavaScript
If the layout is using a custom HTML module, you will see commented out instructions inside the module for you to follow when making changes
Proceed to style/include/exclude elements as needed and then publish

Products - Singular Themer Layout

Hover over "new" > click "themer layout"
Name the title "Product Singular" and make sure layout is set to "Singular" > click "add themer layout"
For the location: change this to "product" > "all products" - Do NOT set the location to "All Singular" since this applies to pages as well and can mess up the site
Publish the layout, then launch beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Select desired template > click "replace existing layout" - refresh the layout without publishing it so that you can be sure any CSS that's included with the layout transfers over
Make sure you "view as" a product that has content in it, so that you can see what you're styling
Make sure any text on the layout is set via field connection when you're in a singular themer layout, unless its text that must be repeated across all products that share the layout
If the layout has any custom CSS you will be able to see this and make adjustments to it from the tools dropdown in beaver builder > layout CSS/JavaScript
If the layout is using a custom HTML module, you will see commented out instructions inside the module for you to follow when making changes
Proceed to style/include/exclude elements as needed and then publish

Contact - Page Layout

Open the contact page in beaver builder
From the plus sign to the right of the screen, select templates > saved templates > you should see the templates listed here that are supposed to be included in your package
Select the contact page template that you downloaded and imported and make any necessary design changes - replace the content and swap any images out for ones that are actually hosted on your site, change any colors and sizes as needed.

Note:

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.

Updated Fields related to Personally Identifiable Information are present

Created Guide: Leapfrog Theme Setup Guide

Image optimization guide – 22310