{"id":5979,"date":"2018-03-07T02:33:49","date_gmt":"2018-03-06T17:33:49","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=5979"},"modified":"2025-08-18T11:02:18","modified_gmt":"2025-08-18T09:02:18","slug":"header","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/header\/","title":{"rendered":"Header"},"content":{"rendered":"<p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-744a4a991712cfedefce3b3542da2163\">\n#top .av-special-heading.av-av_heading-744a4a991712cfedefce3b3542da2163{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-744a4a991712cfedefce3b3542da2163 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-744a4a991712cfedefce3b3542da2163 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-744a4a991712cfedefce3b3542da2163 av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Header<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div> <div  class='hr av-2k4dhl7-60330e3a79bfe1ec920481a85c2b787c hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-92ktcr-f2227f0ed04f5befa2a66f7a7907141f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-8t5iuj-7b23060dba3a37dcc75adde90e883043 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> Let&#8217;s take a look at some of the options available in Enfold to create different types of Headers. If you like to take a quick look at some of the header styles that comes packed with Enfold please check out the\u00a0<a href=\"https:\/\/kriesi.at\/themes\/enfold-overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">overview<\/a> section. Not all websites are the same so the header requirements for each site can dramatically change. Some websites may have a small menu and others may require a huge list of menu\u00a0items with widgets like the social icon, search bar or a custom widget to be added. By default, Enfold comes with several header layouts and support header widget area which allow you to add your custom code in the widget area to display an affiliate banner or an extra element. <\/p>\n<\/div><\/section> <div  class='hr av-2d0e61n-636f61a6a052a8a791ad0b17eb7d46d0 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-8e142z-1394f7c34046ab57a7fbfdff59966f77 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Header Setup<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-2akgnpn-9669c07f30128f64056aa1928396dc8f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> Let&#8217;s take a look at different header options available in the enfold theme. <\/p>\n<\/div><\/section> <div  class='togglecontainer av-28v3ie3-16df262f2d6d1b6c3edc2d807f2b9522 av-minimal-toggle  avia-builder-el-7  el_after_av_textblock  el_before_av_hr  toggle_close_all' > <section class='av_toggle_section av-cwvv4r-80ef0f9e33472c6d18c910a9753d7ca3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-vertical-horizontal-header' data-fake-id='#vertical-horizontal-header' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='vertical-horizontal-header' data-slide-speed=\"200\" data-title=\"Vertical or Horizontal Header\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Vertical or Horizontal Header\" data-aria_expanded=\"Click to collapse: Vertical or Horizontal Header\">Vertical or Horizontal Header<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='vertical-horizontal-header' aria-labelledby='toggle-vertical-horizontal-header' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Choose between a vertical or horizontal header from <strong>Enfold &gt; Layout &gt;\u00a0Logo and Main Menu<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8956\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-vertical.png\" alt=\"\" width=\"895\" height=\"320\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-vertical.png 895w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-vertical-300x107.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-vertical-768x275.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-vertical-705x252.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-vertical-600x215.png 600w\" sizes=\"auto, (max-width: 895px) 100vw, 895px\" \/> <\/p>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-at2ye3-ac55af238b51f8af5f80c2aed51ab581'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-header-layout' data-fake-id='#header-layout' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='header-layout' data-slide-speed=\"200\" data-title=\"Header Layout\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Layout\" data-aria_expanded=\"Click to collapse: Header Layout\">Header Layout<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='header-layout' aria-labelledby='toggle-header-layout' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Enfold comes with the following built-in header layouts which can be accessed from <strong>Enfold &gt; Header &gt; Header Layout &gt; Menu and Logo Position<\/strong><\/p>\n<ul>\n<li>Logo left, Menu right<\/li>\n<li>Logo right, Menu Left<\/li>\n<li>Logo left, Menu below<\/li>\n<li>Logo right, Menu below<\/li>\n<li>Logo center, Menu below<\/li>\n<li>Logo center, Menu above<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-92rasb-826752646b6c5be2289000fa073e711f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-header-width' data-fake-id='#header-width' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='header-width' data-slide-speed=\"200\" data-title=\"Header Width\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Width\" data-aria_expanded=\"Click to collapse: Header Width\">Header Width<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='header-width' aria-labelledby='toggle-header-width' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> By default, the width of the content inside the header\u00a0is same as the width of the container which is set in\u00a0<strong>Enfold &gt; General Layout &gt; Dimensions &gt; Maximum Container width<\/strong> <strong>Full-width header: <\/strong>To set up a header that takes up 100% width of the browser window so that the header contents like the logo and menu spread apart to the extreme left and right side of the header go to : <strong>Enfold &gt; Header &gt; Header Behavior &gt; Let logo and menu position adapt to browser window<\/strong> Example: Take a look at our Gym demo and notice how the logo, menu and header widgets spread across\u00a0the header. <a href=\"https:\/\/kriesi.at\/themes\/enfold-gym\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8957\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym-1.jpg\" alt=\"\" width=\"705\" height=\"126\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym-1.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym-1-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym-1-600x107.jpg 600w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/a> <strong>Custom-width header:\u00a0<\/strong>If your header design requires that the width of the header is different from the container width you can use the below CSS to change the width of the header content area:<\/p>\n<pre><code> \r\n\/*--------------------------------*\/\r\n\r\n\/* Custom header width           *\/\r\n\r\n\/*--------------------------------*\/\r\n\r\n\/* Custom header width *\/\r\n#top #header .container {\r\n    width: 800px;\r\n    max-width: 100%;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-7vv0nf-52be8d9383428d475538674b4de889e1'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-header-height' data-fake-id='#header-height' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='header-height' data-slide-speed=\"200\" data-title=\"Header Height\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Height\" data-aria_expanded=\"Click to collapse: Header Height\">Header Height<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='header-height' aria-labelledby='toggle-header-height' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Header height can be changed from\u00a0<strong>Enfold &gt; Header &gt; Header Layout &gt; Header Size<\/strong>\u00a0( Slim | Large | Custom Pixel Value ) If your design requires the header height to be of a custom value which is more than 300px please use the below CSS.<\/p>\n<pre><code>\r\n\/*--------------------------------*\/\r\n\r\n\/* Custom header height           *\/\r\n\r\n\/*--------------------------------*\/\r\n\r\n#header #header_meta .container {\r\n    \/* Top bar height *\/\r\n    \/*   height: 50px  !important;  *\/\r\n}\r\n\r\n#header #header_main .container {\r\n    \/*  Main header height  *\/\r\n    height: 250px !important;\r\n}\r\n\r\n#top #main {\r\n    \/* Distance of page content from top is equal to total header height including the top bar *\/\r\n    padding-top: 250px!important;\r\n}\r\n<\/code><\/pre>\n<p><strong>Mobile Header<\/strong>: The height of the header defaults to approx 80px in a mobile device layout. To change this<\/p>\n<pre><code>\r\n\/*--------------------------------*\/\r\n\r\n\/* Custom header height in mobile *\/\r\n\r\n\/*--------------------------------*\/\r\n\r\n@media only screen and (max-width: 767px) {\r\n    #header #header_meta .container {\r\n        \/* Top bar height *\/\r\n        \/*   height: 50px  !important;  *\/\r\n    }\r\n\r\n    #header #header_main .container {\r\n        \/*  Main header height  *\/\r\n        height: 90px !important;\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>NOTE: To align the menu and logo please check the documentation of the respective elements. <\/p>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-2ybzhn-8552439df3a08824a999260c9939db60'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-header-styles' data-fake-id='#header-styles' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='header-styles' data-slide-speed=\"200\" data-title=\"Header Background, Border and other styles\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Background, Border and other styles\" data-aria_expanded=\"Click to collapse: Header Background, Border and other styles\">Header Background, Border and other styles<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='header-styles' aria-labelledby='toggle-header-styles' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Header styles such as background color, image, text color, link color, border can be changed from: <strong>Enfold &gt; General Styling &gt; Logo Area<\/strong> Header border,\u00a0active menu indicators or drop shadow effects can be changed from: <strong>Enfold &gt; Header &gt; Header Style\u00a0<\/strong> Header Background Color: <strong>Enfold &gt; General Styling &gt; Logo Area &gt;\u00a0Logo Area background color<\/strong> Header Background Image: <strong>Enfold &gt; General Styling &gt; Logo Area &gt;\u00a0Background Image<\/strong> <strong>Transparent or Glassy header<\/strong>\u00a0can be activated from <strong>Dashboard &gt;\u00a0Page\/Post &gt; Layout &gt;\u00a0Header visibility and transparency<\/strong> To set transparency header styles go to <strong>Enfold &gt; Header &gt; Transparency Options<\/strong> <\/p>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-4erf0r-1bc5db9e85a9684f3b11179f68be5dab'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-header-behavior' data-fake-id='#header-behavior' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='header-behavior' data-slide-speed=\"200\" data-title=\"Header Behavior\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Behavior\" data-aria_expanded=\"Click to collapse: Header Behavior\">Header Behavior<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='header-behavior' aria-labelledby='toggle-header-behavior' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> By default, the header will display on Top of the content. You can change this by setting any of the following types of header behavior from <strong>Enfold &gt; Header &gt; Header Behavior\u00a0<\/strong><\/p>\n<ul>\n<li>Sticky Header.<\/li>\n<li>Shrink Header on page scroll.<\/li>\n<li>Unstick topbar (The small top bar above the header will no longer stick to the top)<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-4s6qpn-7384092d273c2ad968dca3c9bf680a01'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-extra-elements' data-fake-id='#extra-elements' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='extra-elements' data-slide-speed=\"200\" data-title=\"Extra elements\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Extra elements\" data-aria_expanded=\"Click to collapse: Extra elements\">Extra elements<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='extra-elements' aria-labelledby='toggle-extra-elements' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Extra elements mentioned below can be displayed in the header. To access the extra element&#8217;s settings\u00a0go to <strong>Enfold &gt; Header &gt; Extra Elements<\/strong><\/p>\n<ul>\n<li>Social Icons<\/li>\n<li>Secondary Menu<\/li>\n<li>Header Phone Number\/Extra Info<\/li>\n<\/ul>\n<p>Shopping Cart Icon: <strong>Enfold &gt; Shop Options &gt;\u00a0Header Shopping Cart Icon<\/strong> <\/p>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-238xzv-32a2704ef46674c3c8e360d7215a2cbf'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Show or Hide Header\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Show or Hide Header\" data-aria_expanded=\"Click to collapse: Show or Hide Header\">Show or Hide Header<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Display header when a user scrolls the page <strong>Dashboard &gt;<\/strong>\u00a0<strong>Pages\/Posts &gt; Layout &gt; Header visibility and transparency <\/strong> To show or hide header on selected pages go to <strong>Dashboard &gt;<\/strong>\u00a0<strong>Pages\/Posts &gt; Layout &gt; Header visibility and transparency<\/strong> To hide the header on all pages at once we can use the below CSS<\/p>\n<pre><code>\r\n\/*--------------------------------*\/\r\n\r\n\/* Hide header on all pages *\/\r\n\r\n\/*--------------------------------*\/\r\n\r\n#header {\r\n    display: none !important;\r\n}\r\n<\/code><\/pre>\n<p>To hide header only in mobile on all pages please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/*--------------------------------*\/\r\n\r\n\/* Hide header on all pages (mobile only) *\/\r\n\r\n\/*--------------------------------*\/\r\n\r\n@media only screen and (max-width: 990px) {\r\n    #header {\r\n        display: none !important;\r\n    }\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section> <\/div> \n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1wr6kej-bc2fcf17cba5c54212a1fc1947986906\">\n#top .hr.hr-invisible.av-1wr6kej-bc2fcf17cba5c54212a1fc1947986906{\nheight:10px;\n}\n<\/style>\n<div  class='hr av-1wr6kej-bc2fcf17cba5c54212a1fc1947986906 hr-invisible  avia-builder-el-8  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-8e142z-1394f7c34046ab57a7fbfdff59966f77 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> A mix and match of the above settings can produce various header styles. Below are some examples: <\/p>\n<\/div><\/section> <div  class='hr av-1wr6kej-2afc2d1001a65ccec2d41edb18d144dc hr-default  avia-builder-el-10  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-8e142z-1394f7c34046ab57a7fbfdff59966f77 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Header Layouts<\/h3>\n<\/div><\/section> \n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-24960b-2af43ede7abad75d704f924aa6c6f9a2\">\n.flex_column.av-24960b-2af43ede7abad75d704f924aa6c6f9a2{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-24960b-2af43ede7abad75d704f924aa6c6f9a2 av_one_full  avia-builder-el-12  el_after_av_textblock  el_before_av_hr  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-1' class='av-masonry av-jhy6vm9i-5f6e99235fae64c0eb576d9ff95b112c noHover av-flex-size av-large-gap av-hover-overlay-active av-masonry-animation-active av-masonry-col-2 av-caption-on-hover av-caption-style-overlay av-masonry-gallery ' data-post_id=\"5979\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/\"  aria-label=\"image 2017\"  id='av-masonry-1-item-8921' data-av-masonry-item='8921' class='av-masonry-entry isotope-item post-8921 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"2017\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-2017\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8921 avia-img-lazy-loading-not-8921\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/2017-705x126.jpg\" title=\"2017\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/2017.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/2017-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/2017-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >2017<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-blog\/\"  aria-label=\"image blog\"  id='av-masonry-1-item-8924' data-av-masonry-item='8924' class='av-masonry-entry isotope-item post-8924 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"blog\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-blog\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8924 avia-img-lazy-loading-not-8924\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/blog-705x126.jpg\" title=\"blog\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/blog.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/blog-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/blog-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >blog<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-app\/\"  aria-label=\"image app\"  id='av-masonry-1-item-8922' data-av-masonry-item='8922' class='av-masonry-entry isotope-item post-8922 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"app\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-app\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8922 avia-img-lazy-loading-not-8922\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/app-705x126.jpg\" title=\"app\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/app.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/app-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/app-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >app<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-band\/\"  aria-label=\"image band\"  id='av-masonry-1-item-8923' data-av-masonry-item='8923' class='av-masonry-entry isotope-item post-8923 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"band\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-band\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8923 avia-img-lazy-loading-not-8923\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/band-705x126.jpg\" title=\"band\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/band.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/band-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/band-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >band<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-construction\/\"  aria-label=\"image construction\"  id='av-masonry-1-item-8926' data-av-masonry-item='8926' class='av-masonry-entry isotope-item post-8926 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"construction\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-construction\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8926 avia-img-lazy-loading-not-8926\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/construction-705x126.jpg\" title=\"construction\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/construction.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/construction-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/construction-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >construction<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-consulting\/\"  aria-label=\"image consulting\"  id='av-masonry-1-item-8927' data-av-masonry-item='8927' class='av-masonry-entry isotope-item post-8927 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"consulting\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-consulting\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8927 avia-img-lazy-loading-not-8927\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/consulting-705x126.jpg\" title=\"consulting\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/consulting.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/consulting-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/consulting-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >consulting<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-dark-photography\/\"  aria-label=\"image dark-photography\"  id='av-masonry-1-item-8928' data-av-masonry-item='8928' class='av-masonry-entry isotope-item post-8928 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"dark-photography\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-dark-photography\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8928 avia-img-lazy-loading-not-8928\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dark-photography-705x126.jpg\" title=\"dark-photography\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dark-photography.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dark-photography-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dark-photography-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >dark-photography<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold\/\"  aria-label=\"image default\"  id='av-masonry-1-item-8929' data-av-masonry-item='8929' class='av-masonry-entry isotope-item post-8929 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"default\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8929 avia-img-lazy-loading-not-8929\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/default-705x126.jpg\" title=\"default\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/default.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/default-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/default-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >default<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-dj\/\"  aria-label=\"image dj\"  id='av-masonry-1-item-8930' data-av-masonry-item='8930' class='av-masonry-entry isotope-item post-8930 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"dj\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-dj\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8930 avia-img-lazy-loading-not-8930\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dj-705x126.jpg\" title=\"dj\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dj.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dj-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/dj-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >dj<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-elegant-portfolio\/\"  aria-label=\"image elegant-portfolio\"  id='av-masonry-1-item-8931' data-av-masonry-item='8931' class='av-masonry-entry isotope-item post-8931 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"elegant-portfolio\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-elegant-portfolio\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8931 avia-img-lazy-loading-not-8931\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/elegant-portfolio-705x126.jpg\" title=\"elegant-portfolio\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/elegant-portfolio.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/elegant-portfolio-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/elegant-portfolio-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >elegant-portfolio<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-gym\/\"  aria-label=\"image gym\"  id='av-masonry-1-item-8932' data-av-masonry-item='8932' class='av-masonry-entry isotope-item post-8932 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"gym\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-gym\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8932 avia-img-lazy-loading-not-8932\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym-705x126.jpg\" title=\"gym\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/gym-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >gym<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-church\/\"  aria-label=\"image church\"  id='av-masonry-1-item-8925' data-av-masonry-item='8925' class='av-masonry-entry isotope-item post-8925 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"church\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-church\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8925 avia-img-lazy-loading-not-8925\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/church-705x126.jpg\" title=\"church\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/church.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/church-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/church-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >church<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-health-coach\/\"  aria-label=\"image health\"  id='av-masonry-1-item-8933' data-av-masonry-item='8933' class='av-masonry-entry isotope-item post-8933 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"health\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-health-coach\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8933 avia-img-lazy-loading-not-8933\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/health-705x126.jpg\" title=\"health\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/health.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/health-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/health-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >health<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-hotel\/\"  aria-label=\"image hotel\"  id='av-masonry-1-item-8934' data-av-masonry-item='8934' class='av-masonry-entry isotope-item post-8934 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"hotel\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-hotel\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8934 avia-img-lazy-loading-not-8934\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/hotel-705x126.jpg\" title=\"hotel\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/hotel.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/hotel-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/hotel-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >hotel<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-landing-page\/\"  aria-label=\"image landing-page\"  id='av-masonry-1-item-8935' data-av-masonry-item='8935' class='av-masonry-entry isotope-item post-8935 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"landing-page\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-landing-page\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8935 avia-img-lazy-loading-not-8935\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/landing-page-705x126.jpg\" title=\"landing-page\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/landing-page.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/landing-page-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/landing-page-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >landing-page<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-lifestyle-blog\/\"  aria-label=\"image lifestyle-blog\"  id='av-masonry-1-item-8936' data-av-masonry-item='8936' class='av-masonry-entry isotope-item post-8936 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"lifestyle-blog\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-lifestyle-blog\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8936 avia-img-lazy-loading-not-8936\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/lifestyle-blog-705x126.jpg\" title=\"lifestyle-blog\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/lifestyle-blog.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/lifestyle-blog-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/lifestyle-blog-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >lifestyle-blog<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/themes\/enfold-medical\/\"  aria-label=\"image medical\"  id='av-masonry-1-item-8937' data-av-masonry-item='8937' class='av-masonry-entry isotope-item post-8937 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image' title=\"medical\" alt=\"\"  data-av-masonry-custom-link=\"https:\/\/kriesi.at\/themes\/enfold-medical\/\"  itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8937 avia-img-lazy-loading-not-8937\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/medical-705x126.jpg\" title=\"medical\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/medical.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/medical-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/medical-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >medical<\/h3><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><div id='av-masonry-1-item-8938' data-av-masonry-item='8938' class='av-masonry-entry isotope-item post-8938 attachment type-attachment status-inherit hentry documentation explore  av-masonry-item-with-image'    itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"705\" height=\"126\" fetchpriority=\"high\" class=\"wp-image-8938 avia-img-lazy-loading-not-8938\"  src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/restaurant-705x126.jpg\" title=\"restaurant\" alt=\"\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/restaurant.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/restaurant-300x54.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/restaurant-600x107.jpg 600w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >restaurant<\/h3><\/div><\/div><\/figcaption><\/figure><\/div><!--end av-masonry entry--><\/div><\/div><\/div> <div  class='hr av-1wr6kej-2afc2d1001a65ccec2d41edb18d144dc hr-default  avia-builder-el-14  el_after_av_one_full  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1vfbyij-75313f393d3db5a3570cbf8d5e33c978 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code Snippet<\/h2>\n<\/div><\/section> <div  class='avia-builder-widget-area clearfix  avia-builder-el-16  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div> <div  class='hr av-1saytij-36c2950fa912ff7ac2986abb80292f15 hr-default  avia-builder-el-17  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1pzd4qz-6a2d6d678bdbdea4ff1920e55ecff8b8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section> <div  class='hr av-1e8sq57-66d32aef37ad1b217942d9cefb6708cd hr-default  avia-builder-el-19  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 id=\"adding-a-header-widget-area\">Adding a header widget area<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p id=\"adding-a-header-widget-area\">Header widget area lets you add a custom text, banner image, icons or any other widget to the header area from <strong>Appearance &gt; Widgets\u00a0<\/strong><\/p>\n<\/div><\/section> <div  class='togglecontainer av-fynrnf-5e962c32ff25175ddd3f9ac1d270c99d av-minimal-toggle  avia-builder-el-22  el_after_av_textblock  el_before_av_hr  toggle_close_all' > <section class='av_toggle_section av-37r2a3-739dc48ee73e4b4587fc016ae441a4aa'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Step 1: Activate header widget area\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Activate header widget area\" data-aria_expanded=\"Click to collapse: Step 1: Activate header widget area\">Step 1: Activate header widget area<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Depending on the <strong>header layout<\/strong> you are using copy one of the code snippets to your child theme functions.php file to activate the header widget area in the theme. To know the header layout you are using go to <strong>Enfold &gt; Header &gt; Header Layout &gt; Menu and Logo Position<\/strong> If any of the below header layouts is active Logo left, Menu right Logo right, Menu Left Logo center, Menu above Copy code:  In case you\u2019re using a layout with the menu below in the header area Logo left, Menu below Logo right, Menu below Logo center, Menu below Copy this code instead:  <\/p>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-2ene8b-167807a9e2b93c2d9528a2b4995537e9'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Step 2: Add code to functions.php file\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Add code to functions.php file\" data-aria_expanded=\"Click to collapse: Step 2: Add code to functions.php file\">Step 2: Add code to functions.php file<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Let&#8217;s add the header widget code to the bottom of the functions.php file <strong>STEPS<\/strong>:<\/p>\n<ol>\n<li>Go to Appearance &gt; Editor in your WordPress dashboard.<\/li>\n<li>Select the correct theme or child theme from the select theme option on top.<\/li>\n<li>After selecting the correct theme, you may notice a lot more files depending on the theme you have.\u00a0 Browse the file &#8220;Theme Functions&#8221; or &#8220;functions.php&#8221;. ( You\u00a0can also use\u00a0an FTP client and navigate to wp-content\\themes\\enfold-child\\functions.php )<\/li>\n<li>Add the code to the bottom of the functions.php file as shown in the below example.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9096\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area.png\" alt=\"\" width=\"1164\" height=\"711\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area.png 1164w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-300x183.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-768x469.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-1030x629.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-705x431.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-600x366.png 600w\" sizes=\"auto, (max-width: 1164px) 100vw, 1164px\" \/> <\/p>\n<\/div><\/div><\/div><\/section> <section class='av_toggle_section av-2cnt2j-ac1a1215c6081dedc6f4a61c012a4c11'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"Step 3: Create a widget area and add your widgets\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3: Create a widget area and add your widgets\" data-aria_expanded=\"Click to collapse: Step 3: Create a widget area and add your widgets\">Step 3: Create a widget area and add your widgets<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> Lastly, we will create a widget area which will show in the header area and add our widgets.<\/p>\n<ol>\n<li>Navigate to\u00a0<strong>Dashboard &gt; Appearance &gt; Widgets<\/strong><\/li>\n<li>Create a new widget area named\u00a0<strong>header<\/strong><\/li>\n<li>Add a text widget with and some text in it such as &#8220;Header widget text&#8221; for testing purpose<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9149\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-widget.jpg\" alt=\"\" width=\"1254\" height=\"716\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-widget.jpg 1254w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-widget-300x171.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-widget-768x439.jpg 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-widget-1030x588.jpg 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-widget-705x403.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/header-widget-600x343.jpg 600w\" sizes=\"auto, (max-width: 1254px) 100vw, 1254px\" \/> If everything went well for you, the text you entered in the widget area &#8220;Header widget text&#8221; will appear in the frontend of your\u00a0website close to the logo area. <\/p>\n<\/div><\/div><\/div><\/section> <\/div> <div  class='hr av-1e8sq57-66d32aef37ad1b217942d9cefb6708cd hr-default  avia-builder-el-25  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 id=\"header-widget-position\">Widget title, text and link style<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> Styling the header widget title, text and links: Widget Titles can be styled from <strong>Enfold &gt; Advanced Styling &gt; Widget Title <\/strong> The widget <strong>background,text and links<\/strong>\u00a0can be styled using the below custom CSS. <\/p>\n<\/div><\/section> <section  class='av_textblock_section av-931dfv-1f832629a158e5b07151188c95ca3696 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> <strong>Code snippets:<\/strong> <\/p>\n<\/div><\/section> <div  class='togglecontainer av-tda4b-99d79c0766b9a96e2a3c2debb6620881 av-minimal-toggle  avia-builder-el-29  el_after_av_textblock  el_before_av_hr  toggle_close_all' > <section class='av_toggle_section av-2d3gcb-08ef7ad732795f42a04a3f105a4f6cf7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \r\n\r\n\/*--------------------------------*\/\r\n\r\n\/* Header widget *\/\r\n\r\n\/*--------------------------------*\/\r\n\r\n\r\n\/* Widget text and background *\/\r\n#top #header #header_main .widget {\r\n    line-height: 14px;\r\n    color:#008374;\r\n    background: #c4dff6;\r\n}\r\n\r\n\/* Widget title *\/\r\n#top #header #header_main .widget h3.widgettitle {\r\n    color: #ff0000;\r\n}\r\n\r\n\r\n\/* Widget link *\/\r\n#top #header.header_color #header_main .widget a {\r\n    color: #00aeff;\r\n}\r\n\r\n#top #header.header_color #header_main .widget a:hover {\r\n    background: #000;\r\n    color: #fff;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section> <\/div> <div  class='hr av-1e8sq57-66d32aef37ad1b217942d9cefb6708cd hr-default  avia-builder-el-30  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 id=\"header-widget-position\">Header widget position<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> Previously, we created a header widget area. We can now use this widget area to display a custom text,\u00a0 Call to action buttons, Image banner or shortcodes from a plugin or theme elements like a news ticker, post slider, testimonials, Newsletter form, etc. Using custom code we can change the header elements (Logo, Menu and Widget) size and order in which they appear and produce many variations of the header layout. <\/p>\n<\/div><\/section> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> <strong>So how does it work?<\/strong> The code snippet can be used to create different types of scalable headers. The code resets the\u00a0width and height of the header and its elements like the logo, menu or widgets to make them responsive every time the browser width changes. <strong>Header height<\/strong>: The header height is scalable if not a sticky header and is defined by the tallest header element or all of the elements together make up for the header height depending on the header layout. <strong>Logo size<\/strong>: The logo will be displayed in the same size as uploaded by the user in large screens and responsively scaled down to a set min-height in the code. Define the logo max-width and min-width to scale the logo and adjust the height and width for different viewports. <strong>Fixed headers<\/strong>: If a Sticky Header is activated, manually add the top padding for the page content &#8220;#main&#8221; in the &#8220;Fixed header&#8221; section of the code for different viewports. <strong>Shrinking Header<\/strong>: The code automatically disables the shrinking header for some layouts. It is recommended to deactivate the shrinking header while using this code. <img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10010 alignleft\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Shrinking-Header.png\" alt=\"\" width=\"766\" height=\"221\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Shrinking-Header.png 766w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Shrinking-Header-300x87.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Shrinking-Header-705x203.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Shrinking-Header-600x173.png 600w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/> <\/p>\n<\/div><\/section> \n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1e8sq57-9eba07d5f1defeecb0aef94d3130f8f5\">\n#top .hr.hr-invisible.av-1e8sq57-9eba07d5f1defeecb0aef94d3130f8f5{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-1e8sq57-9eba07d5f1defeecb0aef94d3130f8f5 hr-invisible  avia-builder-el-34  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> <strong>NOTE<\/strong>:<\/p>\n<ul>\n<li>Use the recommended theme settings provided in the examples.<\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">Clear the cache<\/a> and remove any custom code\/plugins that may cause a conflict.<\/li>\n<li>To use a plugin shortcode as a widget, you may need to add additional styling. It is <strong>outside the scope of our support<\/strong> to make third party widgets work with the theme.<\/li>\n<li>Depending on the size of the widget content, sometimes the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/menu\/#troubleshoot\" target=\"_blank\" rel=\"noopener\">menu items may run into the widget area<\/a>.<\/li>\n<li>Almost all the example layouts use &#8220;<strong>Logo left, Menu right<\/strong>&#8221; as the logo and menu position in the theme settings. The order of the elements in which they appear is later changed using the <a href=\"https:\/\/flexbox.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">flexbox CSS<\/a>. Check out some basic use of flexbox below:<\/li>\n<\/ul>\n<\/div><\/section> <div  class='togglecontainer av-tda4b-99d79c0766b9a96e2a3c2debb6620881 av-minimal-toggle  avia-builder-el-36  el_after_av_textblock  el_before_av_hr  toggle_close_all' > <section class='av_toggle_section av-21ng57-142771064a6883018cc064862da72da0'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"&lt;strong&gt;Flexbox Usage&lt;\/strong&gt;\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: &lt;strong&gt;Flexbox Usage&lt;\/strong&gt;\" data-aria_expanded=\"Click to collapse: &lt;strong&gt;Flexbox Usage&lt;\/strong&gt;\"><strong>Flexbox Usage<\/strong><span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p> <strong>Float<\/strong>: To float the header elements like the logo, widget or menu, define &#8220;margin-(left\/right): auto&#8221; to move towards the left or right side of the header. <strong>Width<\/strong>: Define &#8220;flex basis&#8221; and\/or &#8220;flex-grow&#8221; value in &#8220;%&#8221; or &#8220;px&#8221; to set the width of the header elements like the logo, menu or widget area. <strong>Clear<\/strong>: Define &#8220;flex-basis:100%; to make the header elements full-width and also move the element to a new row. <strong>Height<\/strong>: Once the code is activated, header inherits its content height. <em>Example<\/em>: If the height of a\u00a0<strong>logo\/widget image<\/strong>\u00a0is 400px the header inherit the logo mostly in its original size and the header height will automatically change. To change the header height, upload your images in the correct dimension or define a width and height value for the header elements like logo\/widget in the code snippet. <strong>Position<\/strong>: Define &#8220;order:(different numeric value 1, 2, 3&#8230;)&#8221; to each element like the logo, menu or widgets to change the order in which the header elements <em>Example 1: A header layout in which Logo appears first, widget center and menu right. Update the order and margin value in the CSS to:<\/em><\/p>\n<pre>.logo { order:1 }\r\n\r\n.main_menu { order:3 }\r\n\r\n.widget { order:2 }<\/pre>\n<p><em>Example 2: A header layout with the widget on the left followed by a menu floated to the left and a Logo on the right. Update the order value to:<\/em><\/p>\n<pre>.logo { order:3 }\r\n\r\n.main_menu { order:2; margin-right:auto; }\r\n\r\n.widget { order:1 }<\/pre>\n<\/div><\/div><\/div><\/section> <\/div> \n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1e8sq57-1b724cf6624002e06a04362237b07c41\">\n#top .hr.hr-invisible.av-1e8sq57-1b724cf6624002e06a04362237b07c41{\nheight:20px;\n}\n<\/style>\n<div  class='hr av-1e8sq57-1b724cf6624002e06a04362237b07c41 hr-invisible  avia-builder-el-37  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1pzd4qz-cefa3a840ed05348e846091d37e6e639 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> <strong>Widget on top<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-banner-above-the-logo-and-menu-area\" target=\"_blank\" rel=\"noopener\"> Add a banner above the logo and menu area<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-a-notification-bar-on-top\/\" target=\"_blank\" rel=\"noopener\">Notification bar on top<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-stacked-widget-logo-and-menu\/\" target=\"_blank\" rel=\"noopener\">Stacked widget, logo and menu.\u00a0<\/a><\/li>\n<\/ol>\n<p><strong>Widget on right <\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-logo-left-menu-center-widget-right\/\" target=\"_blank\" rel=\"noopener\">Logo left, Menu center, Widget right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-a-facebook-widget-to-your-header\/\" target=\"_blank\" rel=\"noopener\">Add a Facebook widget to your header<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-a-subscription-form-to-your-header\/\" target=\"_blank\" rel=\"noopener\">Add a subscription form to your header<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-button-elements-to-your-header\/\" target=\"_blank\" rel=\"noopener\">Add button elements to your header<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-menu-left-widget-right-logo-right\/\" target=\"_blank\" rel=\"noopener\">Menu Left, Widget right, Logo right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-centered-logo-and-menu\/\" target=\"_blank\" rel=\"noopener\">Center logo menu<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-the-menu-left-logo-center-overflow-widget-right\/\" target=\"_blank\" rel=\"noopener\">Menu left, logo center, widget right<\/a><\/li>\n<\/ol>\n<p><strong>Widget at the bottom<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-a-banner-image-below-the-logo-and-menu\" target=\"_blank\" rel=\"noopener\">Add a banner image below the logo and menu<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-text-scroller-below-logo-and-menu\/\" target=\"_blank\" rel=\"noopener\">Full width text scroller below logo and menu<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-stacked-logo-menu-and-widgets\/\" target=\"_blank\" rel=\"noopener\">Stack the logo, menu and widgets<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-area-overflow\/\" target=\"_blank\" rel=\"noopener\">Overflow widget area<\/a>.<\/li>\n<\/ol>\n<p><strong>Widget on left<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-left-logo-left-menu-right\/\" target=\"_blank\" rel=\"noopener\">Widget left, Logo left, Menu right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-left-logo-center-menu-right\/\" target=\"_blank\" rel=\"noopener\">Widget Left, Logo center, Menu right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-left-menu-center-logo-right\/\" target=\"_blank\" rel=\"noopener\">Widget Left Menu center\u00a0Logo right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-left-logo-right-menu-below\/\" target=\"_blank\" rel=\"noopener\">Widget Left Logo right Menu below<\/a><\/li>\n<\/ol>\n<p><strong>Widget center<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-logo-left-widget-center-menu-right\/\" target=\"_blank\" rel=\"noopener\">Logo left, Widget center, Menu right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-menu-left-widget-center-logo-right\/\" target=\"_blank\" rel=\"noopener\">Menu left, widget center, Logo right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-centered-logo-widget-and-menu\/\" target=\"_blank\" rel=\"noopener\">Centered logo widget and menu<\/a><\/li>\n<\/ol>\n<p><strong>Logo and widgets\u00a0<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-area-next-to-the-logo\" target=\"_blank\" rel=\"noopener\">Widget area next to the logo<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-area-below-the-logo\" target=\"_blank\" rel=\"noopener\">Widget area below the logo<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-logo-on-top-menu-below\/\" target=\"_blank\" rel=\"noopener\">Full-width logo on top, Menu below<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-multiple-logos-above-the-menu\/\" target=\"_blank\" rel=\"noopener\">Multiple logos above the menu<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-stacked-widget-menu-and-logo-overflow\/\" target=\"_blank\" rel=\"noopener\">Stacked widget, menu and overflowing logo<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-logo-overflow\/\" target=\"_blank\" rel=\"noopener\">Logo overflow<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-the-menu-left-logo-center-overflow-widget-right\/\" target=\"_blank\" rel=\"noopener\">Menu left, logo center (overflow), widget right<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-centered-logo-and-menu\/\" target=\"_blank\" rel=\"noopener\">Centered logo and menu<\/a><\/li>\n<\/ol>\n<p><strong>Multiple widgets <\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-left-logo-center-widget-right-menu-above\/\" target=\"_blank\" rel=\"noopener\">Widget left, Logo center, widget right, menu above<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-widget-left-logo-center-widget-right-menu-below\/\" target=\"_blank\" rel=\"noopener\">Widget left, Logo center, widget right, menu below<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/logo-left-widget-center-widget-right-menu-above\/\" target=\"_blank\" rel=\"noopener\">Logo left, Widgets right, menu above<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-logo-left-widgets-right-menu-below\/\" target=\"_blank\" rel=\"noopener\">Logo left, Widgets right, menu below<\/a><\/li>\n<\/ol>\n<\/div><\/section> <section  class='av_textblock_section av-h0kdsb-0e54871d536fc53e923c3685f7406ba7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> Depending on the widget content size, your widget area may run into the other elements. If you notice this issue on your website please try the following:<\/p>\n<ul>\n<li>Display a burger menu just before the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/menu\/#-menu-overlaps-logo-on-tablet\" target=\"_blank\" rel=\"noopener\">menu items run into the widgets<\/a> using custom CSS.<\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/header\/#Header-Width\" target=\"_blank\" rel=\"noopener\">Increase the width of the header<\/a>\u00a0in desktop screens to add more dynamic space between the header elements.<\/li>\n<li>Hide the widget area or other header elements on small screens using <a href=\"https:\/\/css-tricks.com\/snippets\/css\/media-queries-for-standard-devices\/\" target=\"_blank\" rel=\"noopener noreferrer\">custom CSS<\/a>.<\/li>\n<\/ul>\n<\/div><\/section> <div  class='hr av-ze6jhn-946b022243b18d21105dabd87424675f hr-default  avia-builder-el-40  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-h0kdsb-05cb782f5cb7c93f150071693c28579f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Transparent sticky header<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-fz1fiz-9338a42ce4c6e60932a562323034f4dd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> To make your sticky header transparent please use the below CSS.<\/p>\n<pre> \/* Transparent Sticky Header *\/ \r\n#header.header_color .header_bg {\r\n    background: transparent;\r\n}<\/pre>\n<\/div><\/section> <div  class='hr av-jpaw5n-c607d0df4cf08c7ce18ed07debf9e2ae hr-default  avia-builder-el-43  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-1d0gd0b-4020b9aba6d755a34215bd9a9ff9e6af '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Set transparent header as default header style<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-1bh14az-7d5142fb00f83b76337aa62a614d38c6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> To set the transparent header as a default header style for all page and post please add the below code to your functions.php <\/p>\n<\/div><\/section>  <section  class='av_textblock_section av-1bh14az-303da040fafbaed3241f45d462f33ce7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> To select different header options replace &#8220;header_transparent header_glassy&#8221; in the below line with any of the following parameters:<\/p>\n<pre class=\"avia_codeblock-snippet\"><code>$elements[$counter]['std'] = 'header_transparent header_glassy';<\/code><\/pre>\n<ul>\n<li>header_transparent<\/li>\n<li>header_transparent header_with_border<\/li>\n<li>header_transparent header_glassy<\/li>\n<li>header_transparent header_scrolldown<\/li>\n<li>header_transparent header_hidden<\/li>\n<\/ul>\n<\/div><\/section> <div  class='hr av-jpaw5n-c607d0df4cf08c7ce18ed07debf9e2ae hr-default  avia-builder-el-48  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-t2bqkb-a608c1ebca91de28d83176219c643478 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Top Bar<\/h2>\n<\/div><\/section> <div  class='hr av-qw23dn-791ec261531afc541ef2208fa70768a4 hr-default  avia-builder-el-50  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-p1begr-cb76974dd8661b8efad678f7157b22c0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling the phone info<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-ng67tn-925ac2f4785dc51f53180d5f3d10535b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> To style the phone number using custom CSS please use the below CSS.<\/p>\n<pre> \r\n\r\n\/* Phone info font size *\/\r\n.phone-info { font-size: 18px; }\r\n\r\n\/* phone link info styling *\/\r\n.phone-info a { color: red; }\r\n.phone-info a:hover { color: green; }\r\n<\/pre>\n<p>If you like to use multiple phone numbers: Add the correct phone info in the below HTML and paste it in Enfold &gt; Header &gt; Extra Elements &gt; Phone Number or small info text: <\/p>\n<\/div><\/section>  <section  class='av_textblock_section av-kyeoy3-3dd3daf08d6dfbf6368c45458aea788d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> Add the below CSS for multiple phone numbers to show up on same a line.<\/p>\n<pre> \r\n\/* Phone info *\/\r\n.phone-info-top {\r\n  display:inline-block!important;\r\n  padding:4px 10px;\r\n}\r\n\r\n<\/pre>\n<\/div><\/section> <div  class='hr av-erj2mz-dab33f1dc324bf244eed448149e731f6 hr-default  avia-builder-el-55  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-c9kouj-0a8d29fee630fbd1b15feb29d992143f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Mobile Header<\/h2>\n<\/div><\/section> <div  class='hr av-azoljf-bb39083c68b88ff8cc4ec27015b0b64a hr-default  avia-builder-el-57  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-365jv-5099fda548fd2983b1096e943de0d856 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Transparent header on mobile<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-7ol9ej-6761a42cc1fddbb61d6c847fe993edbc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> If you have activated the transparent header from the page\/post &gt; Layout &gt; Header visibility and transparency by default on the mobile device the header is displayed above the content. If you like to display a transparent header on mobile please use the below CSS<\/p>\n<pre><code>\/* Transparent Header For Mobile *\/\r\n@media only screen and (max-width: 990px) {\r\n.responsive.html_mobile_menu_tablet #top #wrap_all #header { \r\n        position: absolute;\r\n}\r\n.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {\r\n\tbackground: transparent;\r\n}\r\n}<\/code><\/pre>\n<\/div><\/section> <div  class='hr av-5z1wbf-0e255f7acf43775024eb60442d6ea4a1 hr-default  avia-builder-el-60  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-3zblcr-27acc056d374454e1791f99c9999f005 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Sticky header on mobile<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-2jqli3-70d76f6aa83b6ca75adf5ec7b6ec69a3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> To make the header sticky on mobile device please use the below CSS<\/p>\n<pre>\/* Sticky header on mobile *\/\r\n@media only screen and (max-width: 767px) {\r\n  .responsive #top #main {\r\n    \/* Margin top value should be equal to header height*\/\r\n    margin-top: 180px;\r\n  }\r\n  .responsive #top #wrap_all #header {\r\n    position: fixed;\r\n  }\r\n}<\/pre>\n<\/div><\/section> <div  class='hr av-5z1wbf-0e255f7acf43775024eb60442d6ea4a1 hr-default  avia-builder-el-63  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-3zblcr-7cc2fd32ec62971926bef0e8844218d2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section> <div  class='hr av-5z1wbf-0e255f7acf43775024eb60442d6ea4a1 hr-default  avia-builder-el-65  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <section  class='av_textblock_section av-3zblcr-7cc2fd32ec62971926bef0e8844218d2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Contributed Video<\/h3>\n<\/div><\/section> <section  class='av_textblock_section av-3zblcr-7cc2fd32ec62971926bef0e8844218d2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p> <a href=\"https:\/\/www.youtube.com\/embed\/uZv5uLUfyas?rel=0\" target=\"_blank\" rel=\"noopener noreferrer\">Contributed Video<\/a> <\/p>\n<\/div><\/section> <div  class='hr av-1e8sq57-66d32aef37ad1b217942d9cefb6708cd hr-default  avia-builder-el-68  el_after_av_textblock  el_before_av_video '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div> <div  class='avia-video av-2eymgkb-dde7a0b84d5304f5b7dcfa9a1cfa4c48 avia-video-16-9 av-no-preview-image avia-video-load-always av-lazyload-immediate av-lazyload-video-embed'  itemprop=\"video\" itemtype=\"https:\/\/schema.org\/VideoObject\"  data-original_url='https:\/\/vimeo.com\/91837491'><script type='text\/html' class='av-video-tmpl'><div class='avia-iframe-wrap'><iframe loading=\"lazy\" title=\"Intro to the Header Configurator\" src=\"https:\/\/player.vimeo.com\/video\/91837491?dnt=1&amp;app_id=122963&autoplay=0&loop=0&controls=1&muted=0\" width=\"1500\" height=\"844\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/script><div class='av-click-to-play-overlay'><div class=\"avia_playpause_icon\"><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-5979","post","type-post","status-publish","format-standard","hentry","category-documentation","category-explore","documentation","explore"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=5979"}],"version-history":[{"count":13,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5979\/revisions"}],"predecessor-version":[{"id":13940,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5979\/revisions\/13940"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=5979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=5979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=5979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}