Magento 2. Force header
Argento Force Header
Argento Force includes a Header Builder that makes it possible to replace a static Magento header with a fully customizable one.
Here we show you the main elements of the header.
Slider
Header slider is at the top of the page. It is visible on all pages. This slider is CMS block with id header_slider. You can edit its content in Magento Admin.
<div class="swiper-container header-slider" data-mage-init='{"Swissup_Swiper/js/swiper": {"loop":true, "centeredSlides":true, "autoplay": {"delay": 10000}, "navigation":{"nextEl":".swiper-button-next", "prevEl":".swiper-button-prev"}}}'>
<div class="swiper-wrapper">
<div class="swiper-slide"><i class="force-icon force-icon-medium force-delivery"></i> <strong>Free Shipping</strong> <span class="visible-lg-inline">Next working day delivery available.</span></div>
<div class="swiper-slide"><i class="force-icon force-icon-medium force-shield"></i> <strong>Customer Security</strong> <span class="visible-lg-inline">is our first goal and top priority.</span></div>
<div class="swiper-slide"><i class="force-icon force-icon-medium force-100percent"></i> <strong>Full Support</strong> <span class="visible-lg-inline">We glad to help at every step.</span></div>
</div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-black"></div>
</div>
Swiper settings
To present block content as a slider we use Swiper. data-mage-init sets options for swiper slider:
- autoplay": {"delay": 10000} - enable slide autoplay. delay sets time in ms between slides change. 10000ms is 10 sec.
You can change the content of this slider. When you need to add a new slider, you have to place new:
<div class="swiper-slide ">...</div>
Logo
You can see the logo at Argento Force on the left side of the header. It is possible to update logos using default Magento interfaces. Check this article to find out how to update the store logo.
Menu
The menu is in the middle of the header at Argento Force. The menu is powered by the Navigation Pro module. It allows for building so many attractive menus for your site. Read some guides to learn more:
- Build Magento 2 Mega Menu with just a few clicks. Complete guide.
- Create a Magento 2 Iconic Menu. A complete tutorial that helps to display the image icon for each navigation item.
Search and Minicart
You can see the Search and mini cart icon on the right side of the header. The search field is hidden by default and shows up when the user clicks on its icon. The same thing works for the mini cart. You have to click on the bag icon to make it show up.
Search functionality is powered by the Ajax Search module. Please visit the module page to learn more.