{"id":9525,"date":"2018-06-29T08:00:13","date_gmt":"2018-06-29T08:00:13","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold\/?p=9525"},"modified":"2018-08-14T06:38:22","modified_gmt":"2018-08-14T06:38:22","slug":"example-of-multiple-logos-above-the-menu","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/example-of-multiple-logos-above-the-menu\/","title":{"rendered":"Example of multiple logos above the menu"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-jicrijgs-28d97bfe057c02b0fd9cf1d0ac5b6b9c\">\n.avia-section.av-jicrijgs-28d97bfe057c02b0fd9cf1d0ac5b6b9c{\nbackground-color:#c9c9c9;\nbackground-image:unset;\n}\n<\/style>\n<div id='av_section_1'  class='avia-section av-jicrijgs-28d97bfe057c02b0fd9cf1d0ac5b6b9c main_color avia-section-default avia-no-border-styling  avia-builder-el-0  avia-builder-el-no-sibling  avia-bg-style-fixed av-minimum-height av-minimum-height-100 av-height-100  container_wrap sidebar_left'   data-av_minimum_height_pc='100' data-av_min_height_opt='100'><div class='container av-section-cont-open' ><main  role=\"main\" itemprop=\"mainContentOfPage\"  class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-9525'><div class='entry-content-wrapper clearfix'>\n\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-5e32rk-d9b5a580e4696f358ba47c75c5f0f72f\">\n.flex_column.av-5e32rk-d9b5a580e4696f358ba47c75c5f0f72f{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-5e32rk-d9b5a580e4696f358ba47c75c5f0f72f av_one_fifth  avia-builder-el-2  el_after_av_codeblock  el_before_av_three_fifth  first flex_column_div av-zero-column-padding  '     ><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-3yb800-2980160d9ccad1ab981e4a36211d98c6\">\n.flex_column.av-3yb800-2980160d9ccad1ab981e4a36211d98c6{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-3yb800-2980160d9ccad1ab981e4a36211d98c6 av_three_fifth  avia-builder-el-3  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-jjv11uqs-05f8fa55fcd604e82660dfbb86b77545 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Header layout:\u00a0Multiple logos above the menu<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-jjgh7rvu-4b6c7129c5286497d06f2f9ad6393bf4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ol>\n<li>Update your header settings to match the header settings for this example.<\/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>.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-use-the-custom-code\/\" target=\"_blank\" rel=\"noopener\">code snippet<\/a> to your child theme.<\/li>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/header\/#adding-a-header-widget-area\" target=\"_blank\" rel=\"noopener\">Create a header widget area<\/a>.<\/li>\n<li>Add an image\/text widget to the newly created header widget area.<\/li>\n<\/ol>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-8ph4pc-d1bfee4acee17ae29f815161fa81f191 av-minimal-toggle  avia-builder-el-6  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1di25-169c51f2e0f2926b32ddd456e713d137'  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=\"Header Settings\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Settings\" data-aria_expanded=\"Click to collapse: Header Settings\">Header Settings<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>Enfold &gt; Header &gt; Header Layout &gt; Menu and Logo Position &gt;\u00a0Logo left, Menu right<\/p>\n<h6>(* Rest of the settings are optional.)<\/h6>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2w9f39-0d0d9a049cadd0ac0123d80cd9b1ce40'  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=\"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-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \r\n\/************************************\r\n\r\nMultiple logos above the menu\r\n\r\n*************************************\r\n\r\n\r\nCSS Settings:\r\n\r\n\u00bb Initiate Flexbox\r\n\u00bb Topbar\r\n\u00bb Header\r\n\u00bb Logo\r\n\u00bb Menu\r\n\u00bb Widget\r\n\u00bb Social icons\r\n\u00bb Search\r\n\u00bb Cart icon\r\n\r\n***********************************\/\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Initiate Flexbox\r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Header *\/\r\n.responsive #top #header,\r\n\/* Top bar *\/\r\n.responsive #top #header #header_meta, \r\n\/* Search icon *\/\r\n.responsive #top #header #menu-item-search a,\r\n\/* Cart icon *\/\r\n.responsive #top #header a.cart_dropdown_link,\r\n\/* Social icon *\/\r\n.responsive #top #header #header_main nav .social_bookmarks,\r\n\/* Logo *\/\r\n.responsive #top #header #header_main .inner-container .logo,\r\n\/* Main menu, cart and social icons *\/\r\n.responsive #top #header #header_main .inner-container .main_menu,\r\n\/* Widgets *\/\r\n.responsive #top #header #header_main .inner-container .widget,\r\n\/* Header inner container *\/\r\n#top #header #header_main .container.av-logo-container .inner-container {\r\n    display: flex;\r\n    position: relative;    \r\n}\r\n\r\n\r\n\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Topbar\r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Top bar *\/\r\n\r\n.responsive #top #header #header_meta {\r\n    flex-basis: 100%;\r\n}\r\n\r\n\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Header\r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Height outer container *\/\r\n\r\n#top #header #header_main .container.av-logo-container {\r\n    \/* Do not change height here *\/\r\n    \/* Auto height: Header takes the height of the contents *\/\r\n    height: inherit;    \r\n    line-height: inherit;\r\n}\r\n\r\n\r\n\r\n\/* Header inner container *\/\r\n\r\n#top #header #header_main .container.av-logo-container .inner-container {\r\n    \/* Define header height here *\/\r\n    height: inherit;\r\n    position: relative !important;\r\n    flex-wrap: wrap;\r\n    \/* Define header padding *\/\r\n    padding: 10px;\r\n    justify-content: space-between;\r\n}\r\n\r\n\r\n\r\n\/* Wrappers \r\n--------------------------------*\/\r\n\r\n\r\n\/* Main header ( logo, menu, widgets ) and topbar *\/\r\n\r\n.responsive #top #header {\r\n    flex-wrap: wrap;\r\n}\r\n\r\n\r\n\/*  Logo, Menu, Social Icons and Widgets. *\/\r\n\r\n.responsive #top #header #header_main {\r\n    flex-basis: 100%;\r\n}\r\n\r\n\r\n\/* Transparent header \r\n--------------------------------*\/\r\n\r\n.responsive.html_header_transparency #top #wrap_all #header {\r\n    position: absolute;\r\n}\r\n\r\n@media only screen and (max-width: 767px) {\r\n    .responsive.html_header_transparency #top #wrap_all #main {\r\n        \/* Define padding value for transparent header in mobile *\/\r\n        \/*padding-top: 315px !important; *\/\r\n    }\r\n}\r\n\r\n\r\n \r\n\r\n\r\n\/* Fixed header \r\n--------------------------------*\/\r\n\r\n.html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header,\r\n.html_header_sticky.html_header_transparency #top #wrap_all #header,\r\n.html_header_sticky #top #wrap_all #header {\r\n    position: fixed;\r\n}\r\n\r\n.html_header_sticky #top #header_main .container,\r\n.html_header_sticky #top .main_menu ul:first-child&gt;li a {\r\n    height: inherit !important;\r\n    line-height: inherit !important;\r\n}\r\n\r\n\r\n\/* Main content padding value should be same as the fixed header height. *\/\r\n\r\n.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main,\r\n.html_header_sticky #top #wrap_all #main {\r\n    \/* Define padding only if sticky header is active *\/\r\n    \/*padding-top: 262px ;  *\/\r\n}\r\n\r\n@media only screen and (max-width: 767px) {\r\n    .html_header_sticky #top #wrap_all #main {\r\n        \/* Define padding value for sticky header on mobile *\/\r\n        \/*padding-top: 315px !important; *\/\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Logo\r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Logo *\/\r\n\r\n.responsive #top #header #header_main .inner-container .logo {\r\n    display: none;    \r\n}\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Menu\r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Menu outer container: Menu with siblings cart and social icons *\/\r\n\r\n.responsive #top #header #header_main .inner-container .main_menu {\r\n    order: 2;\r\n\r\n    \/* Define menu width *\/\r\n    flex-basis: 100%;\r\n\r\n    align-items: center;\r\n    align-self: center;\r\n    height: inherit !important;\r\n    justify-content: center;\r\n}\r\n\r\n\r\n\/* Navigation *\/\r\n\r\n#header .av-main-nav {\r\n    display: flex;\r\n    flex-wrap: nowrap;\r\n}\r\n\r\n\r\n\/*  Activate burger menu  *\/\r\n\r\n@media only screen and (max-width: 1100px) {\r\n    #top #header .av-main-nav&gt;li.menu-item {\r\n        display: none!important;\r\n    }\r\n    #top #header .av-burger-menu-main {\r\n        cursor: pointer;\r\n        display: block!important;\r\n    }\r\n}\r\n\r\n@media only screen and (max-width: 767px) {\r\n    \/* Mobile menu position fix *\/\r\n    .responsive #top .av-logo-container .avia-menu {\r\n        display: flex!important;\r\n        align-items: center;\r\n    }\r\n}\r\n\r\n\r\n\r\n\/* Mega menu submenu position fix *\/\r\n\r\n.responsive #top #header .avia_mega_div {\r\n    \/* Define megamenu submenu top value *\/\r\n    \/*   top: 300px; \r\n   position: fixed;\r\n   left: 50%;\r\n   transform: translateX(-50%);*\/\r\n}\r\n\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Widget\r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Widgets *\/\r\n\r\n.responsive #top #header #header_main .inner-container .widget {\r\n    order: 1;\r\n    flex-basis: 25%;\r\n    padding: 0;\r\n    clear: none!important;\r\n\r\n    align-self: center;\r\n    align-items: center;\r\n    z-index: 1;\r\n    max-width: 180px;\r\n}\r\n\r\n\r\n.responsive #top #header #header_main .inner-container .widget&gt;div {\r\n    width: 100%;\r\n    line-height: 14px;\r\n    padding: 0 10px;\r\n    background: gold;\r\n}\r\n\r\n\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Social icons\r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Flex support and position fix *\/\r\n\r\n.responsive #top #header #header_main nav .social_bookmarks {\r\n    top: auto;\r\n    margin-top: 0;\r\n    align-items: center;\r\n}\r\n\r\n\r\n\/* Inherit height for flex alignment *\/\r\n\r\n.responsive #top .av-logo-container .social_bookmarks li {\r\n    height: inherit;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Search \r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Your styles here *\/\r\n\r\n\r\n\/*--------------------------------\r\n\r\n\u00bb Cart \r\n\r\n--------------------------------*\/\r\n\r\n\r\n\/* Cart position fix *\/\r\n\r\n#top #header #header_main #menu-item-shop a.cart_dropdown_link {\r\n    height: auto;\r\n}\r\n\r\n@media only screen and (max-width: 767px) {\r\n    .responsive #top #menu-item-shop.cart_dropdown {\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n    .cart_dropdown .dropdown_widget .avia-arrow {\r\n        display: none;\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-jicy20vk-86a9c1ec905e66edddabca72b6dc10da\">\n#top .hr.hr-invisible.av-jicy20vk-86a9c1ec905e66edddabca72b6dc10da{\nheight:20px;\n}\n<\/style>\n<div  class='hr av-jicy20vk-86a9c1ec905e66edddabca72b6dc10da hr-invisible  avia-builder-el-7  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jjgh7rvu-4b6c7129c5286497d06f2f9ad6393bf4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>NOTE<\/strong>: To display multiple logo images and align them as required, we need to first hide the default logo and upload the logo images as widgets from the header widget area. You can also link the logo images from the widget options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10478\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/06\/logo-widgets.png\" alt=\"\" width=\"456\" height=\"682\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/06\/logo-widgets.png 456w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/06\/logo-widgets-201x300.png 201w\" sizes=\"auto, (max-width: 456px) 100vw, 456px\" \/><\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-jicy20vk-86a9c1ec905e66edddabca72b6dc10da\">\n#top .hr.hr-invisible.av-jicy20vk-86a9c1ec905e66edddabca72b6dc10da{\nheight:20px;\n}\n<\/style>\n<div  class='hr av-jicy20vk-86a9c1ec905e66edddabca72b6dc10da hr-invisible  avia-builder-el-9  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-jicy18f7-4a38be4d3cf8b2a5149485e218b9eb8c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/header\/#header-widget-position\" target=\"_blank\" rel=\"noopener\">Back to the article<\/a>.<\/p>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2g2f2o-60d60aa07c36aa7784e6cac1327c2eb2\">\n.flex_column.av-2g2f2o-60d60aa07c36aa7784e6cac1327c2eb2{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2g2f2o-60d60aa07c36aa7784e6cac1327c2eb2 av_one_fifth  avia-builder-el-11  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/div><\/div><\/main><!-- close content main element --><\/div><\/div><div id='after_section_1'  class='main_color av_default_container_wrap container_wrap sidebar_left'  ><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-9525'><div class='entry-content-wrapper clearfix'>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[57,11],"tags":[],"class_list":["post-9525","post","type-post","status-publish","format-standard","hentry","category-example-headers","category-example-post","example-headers","example-post"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/9525","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=9525"}],"version-history":[{"count":16,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/9525\/revisions"}],"predecessor-version":[{"id":10880,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/9525\/revisions\/10880"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=9525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=9525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=9525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}