{"id":9911,"date":"2018-07-08T00:59:47","date_gmt":"2018-07-08T00:59:47","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold\/?p=9911"},"modified":"2018-08-14T06:37:28","modified_gmt":"2018-08-14T06:37:28","slug":"example-of-logo-overflow","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/example-of-logo-overflow\/","title":{"rendered":"Example of logo overflow and widget"},"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-9911'><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:\u00a0Example of logo overflow and widget<\/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-2c91qv-c1e8031df75d704e8156b1d6283118e2'  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\nLogo overflow\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    order: 1;\r\n    flex-basis: auto;\r\n    \/*width: auto;*\/\r\n\r\n    \/* Define scalable min width of the logo on small screens *\/\r\n    min-width: 100px;\r\n    \r\n    z-index: 9;\r\n\r\n    \/* Overflow *\/\r\n    transform: translateY(50%);\r\n    margin-top: -50px;\r\n}\r\n\r\n\r\n@media only screen and (max-width: 767px) {\r\n    \/* Remove transfrom in mobile *\/\r\n    .responsive #top #header #header_main .inner-container .logo {\r\n        transform: none;\r\n        margin-top: 0;\r\n    }\r\n}\r\n\r\n\r\n\/* Logo image size *\/\r\n\r\n.responsive #top #header .logo,\r\n.responsive #top #header .logo a,\r\n.responsive #top #header .logo img {\r\n    width: auto;\r\n    \/* Define scalable max width of the logo on big screens *\/\r\n    \/* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size *\/\r\n    max-width: 200px;\r\n        \r\n    \/* Height specification is not required. It is proportional to the max width of the logo *\/\r\n    height: auto;    \r\n    align-items: center;\r\n    align-self: center;\r\n    justify-content: center;\r\n}\r\n\r\n\r\n\/* Vertically center transparency logo *\/\r\n\r\n.responsive #top #header .logo span img {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n}\r\n\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: 1;\r\n\r\n    \/* Define menu width *\/\r\n    flex-basis: auto;\r\n\r\n    align-items: center;\r\n    align-self: center;\r\n    height: inherit !important;\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: 3;\r\n    flex-basis: auto;\r\n    padding: 0;\r\n    clear: none!important;\r\n\r\n    justify-content: center;\r\n    align-self: center;\r\n    align-items: center;\r\n    z-index: 1;\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<\/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-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-9  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-9911'><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-9911","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\/9911","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=9911"}],"version-history":[{"count":7,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/9911\/revisions"}],"predecessor-version":[{"id":10878,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/9911\/revisions\/10878"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=9911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=9911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=9911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}