{"id":6192,"date":"2018-03-13T15:00:48","date_gmt":"2018-03-13T06:00:48","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=6192"},"modified":"2024-12-20T11:20:43","modified_gmt":"2024-12-20T10:20:43","slug":"logo","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/logo\/","title":{"rendered":"Logo"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2y5pxs-8b2f8d74dd6ef554b2d0213710df5912\">\n#top .av-special-heading.av-2y5pxs-8b2f8d74dd6ef554b2d0213710df5912{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-2y5pxs-8b2f8d74dd6ef554b2d0213710df5912 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-2y5pxs-8b2f8d74dd6ef554b2d0213710df5912 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-2y5pxs-8b2f8d74dd6ef554b2d0213710df5912 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\"  >Logo<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-32owhsg-028b23076c07932852002b15b9a8b762 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>\n<section  class='av_textblock_section av-304k5v4-9115c4fd2a121a6c25622edad4157362 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2zdz5pc-e8edab83b609902889fd736ec44249ab '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>One of the first steps you will take when setting up your site is adding your own logo. From the main theme options, you can upload and set the logo that will then get displayed on the front end. It&#8217;s easy to set and re-set your logo and you may want to play with the sizing of your image to get the desired front-end result.<\/p>\n<p><strong>Preparing your Image<\/strong><\/p>\n<p>We recommend using a .png image with a maximum size of 340px wide by 156px tall. In this section, let&#8217;s take a look at various options Enfod\u00a0has to offer and many ways to customize your logo.<\/p>\n<\/div><\/section>\n<div  class='hr av-2xsxty8-178ce01bd052774bd46cea57e890dc1e 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>\n<section  class='av_textblock_section av-2vv1jj4-345a59ba8a257b6c178fdb4ee2ab5804 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Upload your logo<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2t3rq4g-678ff682ba341a63f702917a716ca214 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Go to the Enfold options from your WordPress admin and from the Theme Options panel look for the\u00a0<strong>Logo\u00a0<\/strong>section:\u00a0<strong>Enfold Options &gt; Logo<br \/>\n<\/strong><br \/>\nIf you choose to have a transparent header another logo for the transparent header can be added from <strong>Enfold &gt; Header &gt; Transparency options &gt; Transparency Logo<\/strong><\/p>\n<\/div><\/section>\n<div  class='hr av-2rvoks0-2e38f3badc4b5be519c5ebee08b210fb hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-m4wlhwrx-2fa363e290c27d3ef26c78ec595d7d02 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Responsive Images<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-m4wlk04s-2af7afd01d22127d9d7261e3bf7d3c5e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Since 4.8.2 responsive images (e.g. for retina screens) are supported. Make sure to upload an image dimension from which WordPress can create the necessary scrset and sizes attributes. Please keep in mind that you must select &#8220;Full Size&#8221; for image size unless you add the attachment ID.<\/p>\n<\/div><\/section>\n<div  class='hr av-42vca8-4063bd05afa6435555132c8bde9ebfd9 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>\n<section  class='av_textblock_section av-m4wlkm61-b2a028cccc89aba2228d4ee93ff23a6b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>SVG Files<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-m4wlmxuh-7e4afcdbf084acf84a60ed3607d339ad '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Since 4.8.6.4 (in beta) Enfold supports svg files.<\/p>\n<p>Administrators may upload svg files to the media library. Enfold also supports paths to local filesystem or URLs that are not in the media library (not recommended for security reasons, must start with http:\/\/ or https:\/\/). If Enfold cannot read the content of this URL on page load, it will render the URL in an IMG tag as a fallback. File content is parsed and added inline starting with the first svg tag. preserveAspectRatio is set for this to be responsive according to logo location.<\/p>\n<p>Nesting of svg is allowed.<\/p>\n<\/div><\/section>\n<div  class='hr av-2m2mcw-1e0092c51cb1b6d0189a5242c76120ea hr-default  avia-builder-el-13  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9x6xg0-f210b7e109d5e83e31dce2d18ba3c164 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code Snippet<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-15  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>\n<div  class='hr av-2mfmqzk-ef5fbd57ecac4e4eedc4da50f285ed79 hr-default  avia-builder-el-16  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2m9070w-431409fe3c1569b2498778bb8cd07ff6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>CSS reference<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2kgu3g0-bf878b6c069667a220a9ea4979312358 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The logo element can be custom styled using the CSS class names below:<\/p>\n<pre> \r\n\/* logo container holds logo and menu *\/\r\n.av-logo-container .inner-container {  }\r\n\r\n\/* .logo contains the logo image enclosed in an anchor tag*\/\r\n.logo {  }\r\n\r\n\/* Logo link *\/\r\n.logo a {  }\r\n\r\n\/* Logo image *\/\r\n.logo img {  }\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-2i6322o-34118d85ac7cef363269a8446aad51d6 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>\n<section  class='av_textblock_section av-8sodq8-2f0ade09085fcfb27888da4f218938d0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-2ehc1bk-52cd8bdddbedfaf7b634b9cc4f73f7d5 hr-default  avia-builder-el-21  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2cqeayo-3e11cb742eb8ea32dd52dc1bc833709e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom logo size<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2c6cfb4-b9f39083c81fd1196a4b12fc0c444221 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>This is usually helpful to set up a wide banner logo. Add a logo and set custom width and height using the below CSS and theme options.<\/p>\n<p>Update the width in the below CSS<br \/>\nUpdate the height from <strong> Enfold Options &gt; Header &gt; Header size &gt; Custom pixels <\/strong><\/p>\n<\/div><\/section>\n\n<div  class='hr av-288eoow-7099d3534a878292e1501f5a340a3a11 hr-default  avia-builder-el-25  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2603b6o-f21434738f3f9263eda256b337761f23 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Space above and below the logo<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2558mm8-4b8af1b6861a397e97f60aca21a872ec '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you like to add some whitespace above and below the logo please use the CSS below.<\/p>\n<pre>\/*Add space around the logo*\/\r\n\r\n#header_main {\r\n  \/* Increase the top and bottom space *\/\r\n    padding: 20px 0;\r\n}\r\n\r\n#top #main {\r\n  \/* If the header overlap your content adjust the padding top value *\/\r\n    padding-top: 130px;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-232i31s-86053e04feea311cbadc6636fbccdf59 hr-default  avia-builder-el-28  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-229pzo0-72034a211693cf6adb5aaac7d2838d40 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Logo in h1<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-20jgwnk-1acd09819e757662fe750dc9b3df36bd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To wrap your logo element in h1 tag please use the code below in your functions.php<\/p>\n<\/div><\/section>\n\n<div  class='hr av-1x2fnwg-a5bab082d0765b09629467acbc2ac7fe hr-default  avia-builder-el-32  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1vj2cn4-8bc7d02207521bac21c936785535d7ba '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 id=\"text-logo-with-subtext\">Image logo with subtext<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1t4bx8g-6744b280838b0d324325296219115d20 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You can add subtext to your logo by adding following code to Functions.php file of your child theme in Appearance &gt; Editor<\/p>\n<p>The code below will wrap your subtext in a H1 tag, we will add custom CSS to style it.<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-1q05ffk-8f8a8bfe844fc55919ad7d4b1251bb80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>And if you would like to display your site title, you can use following code<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-1m2yp1c-4d199626dbf1d2e30f4204f7a8dcac19 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Subtext style and position<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-1kwgzlc-5b156f1c69c1f58db29d0c4112a9b941  avia-builder-el-39  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1j9ifk0-e27a95160d7577dbe8a01a578d198c5b'  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=\"Add subtext to the right of the logo\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add subtext to the right of the logo\" data-aria_expanded=\"Click to collapse: Add subtext to the right of the logo\">Add subtext to the right of the logo<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\" ><pre><code>\r\n\/* CSS - Subtext on right *\/\r\n\r\n#top .logo,\r\n#top .logo a {\r\n  overflow: visible;\r\n}\r\n\r\n\/* Subtext styling *\/\r\n.logo .subtext h1 {\r\n  font-size: 20px;\r\n    font-weight: 600;\r\n}\r\n\r\n.logo .subtext {\r\n  position: absolute;\r\n    top: 50%;\r\n    right: 0;\r\n    transform: translate(120%, -50%);\r\n    z-index: 999;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1i1as68-eedd3c74d9358879656d0c7e1d96bc31'  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=\"Add subtext to the left of the logo\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add subtext to the left of the logo\" data-aria_expanded=\"Click to collapse: Add subtext to the left of the logo\">Add subtext to the left of the logo<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>\/* CSS - Subtext on the left *\/\r\n\r\n#top .logo,\r\n#top .logo a {\r\n  overflow: visible;\r\n}\r\n\r\n\/* Subtext styling *\/\r\n.logo .subtext h1 {\r\n  font-size: 20px;\r\n    font-weight: 600;\r\n}\r\n\r\n.logo .subtext {\r\n  position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    transform: translate(-120%, -50%);\r\n    z-index: 999;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1gq1lw0-cfdfb5488bc4cc494199008bd31b5886'  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=\"Add subtext below the logo\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add subtext below the logo\" data-aria_expanded=\"Click to collapse: Add subtext below the logo\">Add subtext below the logo<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\" ><pre><code>\/* CSS - Subtext below the logo *\/\r\n\/* \r\nIf your subtext is overflowing outside the header \r\nplease increase the header height from\r\nEnfold &gt; Header &gt; Header size &gt; Custom pixels \r\n*\/\r\n\r\n#top .logo,\r\n#top .logo a {\r\n  overflow: visible;\r\n}\r\n\r\n\/* Subtext styling *\/\r\n.logo .subtext h1 {\r\n  font-size: 20px;\r\n    font-weight: 600;\r\n}\r\n\r\n.logo .subtext {\r\n  z-index: 999;\r\n}\r\n\/* Reduce the logo height to make space for the subtext below *\/\r\n#top #header .logo img {  \r\n  max-height: 70%!important;\r\n  margin-top: 10px;\r\n}\r\n\r\n\/* OPTIONAL CHOICE : Change position of subtext when scrolled *\/\r\n#top #header.header-scrolled .logo img {  \r\n  max-height: 100%!important;\r\n}\r\n#top #header.header-scrolled .logo .subtext {\r\n  position: absolute;\r\n    top: 50%;\r\n    right: 0;\r\n    transform: translate(120%, -50%);\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1e51hhc-9a4b9b063ac1ed02dad7f0ee5f3586a0 hr-default  avia-builder-el-40  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1d3ww74-f9a9a94b7108433022a42763cf82ec87 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Text logo with subtext<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1btsnog-158ea4dd7c345787e3c73983fc45ca1c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To replace the default enfold image logo with your text logo please add the code below to your function.php<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-17vx280-890bb91f2f1ee9201d821b1a32098973 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To style the text logo and subtext please use the below CSS<\/p>\n<pre>\/* Text logo styling *\/\r\n\r\n#top .logo,\r\n#top .logo a {  \r\n  overflow: visible;\r\n}\r\n\r\n#top .logo {  \r\n  background: gold;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 15px;\r\n}\r\n#top .logo .subtext {\r\n    font-size: 18px;\r\n    color: #be0027;    \r\n    position: absolute;\r\n    width: 100%;\r\n    left: 0;\r\n    top: 25px;\r\n}\r\n\r\n\/* Hide subtext on scroll *\/\r\n#header.header-scrolled-full .subtext {\r\n  display: none;\r\n}\r\n\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-163zbkg-43e78652bad57ce6dba12662a80d3ab6 hr-default  avia-builder-el-45  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-14vt674-b9bac4123b7c471dcb02d20e142375ab '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change the logo image on some pages<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3uzcio-b8d0f3cb80ab16c1545ceb880389c456 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>It sometimes happens that you need to show one logo on your front page and a different logo on other pages. In that case, you can modify the logo image path with the help of a filter function that you can either add to your theme&#8217;s functions.php file or even better, your child themes function.php file<\/p>\n<p>The following snippet will use the default logo set in theme options, but on the front page, the logo image path will be replaced with a different one.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-z0spz4-81e41163c444542c22bd03d23aaf1181 hr-default  avia-builder-el-49  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-14vt674-6-b7b593f7b3fbc7de5f345474f0256d17 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change the logo link on some pages<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3uzcio-5-d3e4b5b6a48122b1db2593491e36b11f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The logo by default, link to the homepage. If you choose to change the logo link to an external page. Please modify the URL value in the below code and add it to the functions.php\u00a0file.<\/p>\n<p>The following snippet will link the logo to custom URL set for each page.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-z0spz4-3-a2a3214a703632cc9220deafcf72068c hr-default  avia-builder-el-53  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-xhretc-283b78afad9d2043580489c28b568848 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Use a different logo on mobile<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-vltf9c-66ecd2827c1c972d894cc9ca5bc8a527 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you would like to display a different logo on mobile, please add following code to\u00a0<strong>Functions.php<\/strong>file in Appearance &gt; Editor<\/p>\n<\/div><\/section>\n\n<div  class='hr av-so5etc-2ab144853b73ead7753508c4addcc108 hr-default  avia-builder-el-57  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2s811c-e99a642dde72e74ad04992c253b83173 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to hide the logo?<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2m7jts-af5a6e160ab0629afdb478007366a529 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the default enfold logo please use the code below in functions.php<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-mblqts-1cd06e695092b17c760f45db9db169dd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Hide Logo image: <\/strong>To hide the logo image using CSS.<\/p>\n<pre>\/* Hide logo image *\/\r\n#header .logo img {\r\n    display:none;\r\n}\r\n<\/pre>\n<\/div><\/section>\n<section  class='av_textblock_section av-kpkes0-3c134905428a2206bd64a47250ae9acf '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Hide logo image and logo area: <\/strong>To hide both the logo image and logo area so you can display only the menu items please use the CSS code below.<\/p>\n<pre>\/* Hide logo in desktop *\/\r\n\r\n#header .logo,\r\n#header.av_logo_center .av-logo-container,\r\n#header.av_top_nav_header .av-logo-container,\r\n#header.av_bottom_nav_header .av-logo-container,\r\n#main .av-logo-container {\r\n  display: none;\r\n}\r\n\r\n\/* Hide logo in mobile*\/\r\n\r\n@media only screen and (max-width: 767px) {\r\n#main .av-logo-container {\r\n  display: block;\r\n}\r\n#header .logo,\r\n#main .logo {\r\n  display: none!important;\r\n}}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-jsgx9c-93a77bbb7d53061428b202206a735067 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>\n<section  class='av_textblock_section av-1qc7tc-9079135f4fb45f4d45ec435b68635534 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add multiple logos<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-fae38w-f191bb830b1873083efbacd8b83a351f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add additional logos please perform the below steps:<\/p>\n<p>1. Remove the large logo image from Enfold &gt; Theme Options &gt; Logo.<\/p>\n<p>2. Add the code below to your functions.php file (Remove the previous function code before adding this code).<br \/>\nNOTE: Edit the \/ with the logo link in the below code after href=\u201d\/\u201d.<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-cqbtz4-ee019d94deb6c198b0da4d49ab0815b8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>3. Add the CSS below to your site:<\/p>\n<pre> \r\n\/* Additional Logo Styles *\/\r\n#top .first-logo {\r\n    float: left;\r\n    display: inline-block!important;\r\n    position: absolute;\r\n    left: 0;\r\n}\r\n\r\n#top .second-logo {\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  display: inline-block!important;\r\n  position: absolute;\r\n}\r\n\r\n#top .third-logo {\r\n    float: right;\r\n    display: inline-block!important;\r\n    position: absolute;\r\n    right: 0;\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-ahmycw-9f37c88e56ec7dd60931c9addccb5ded hr-default  avia-builder-el-68  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9190u8-355e694a48c19b4b89b74effff3225d8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overlap logo and page content<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7i1hww-14c63d1a757366fbcda5f6ccce7acbf7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To overlap the logo over the page content please use the CSS below.<br \/>\nNOTE: Please adjust the height values to suit your design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7355\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/03\/overlap-e1521032830701.png\" alt=\"\" width=\"700\" height=\"306\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/03\/overlap-e1521032830701.png 700w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/03\/overlap-e1521032830701-300x131.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/03\/overlap-e1521032830701-450x197.png 450w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<pre>\/* CSS - Logo overlap content *\/\r\n\r\n#top .logo,\r\n#top .logo a{\r\n  overflow: visible;\r\n}\r\n\r\n.logo img {\r\n    height: 180%;\r\n    max-height: 180px !important;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-6i9rw0-0d90d6eb981fb8f4e23062cf5586d2b8 hr-default  avia-builder-el-71  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3xaq28-36e78450b56853911b12eac585312d50 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change logo on hover<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-29bikw-4ff5bc0c0acf644686c8b246a0c8b2e9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To change the logo on hover please update the logo URL in the below code and add it to your CSS styles.<\/p>\n<pre>\/*Add your own logo on hover:*\/\r\n\r\n.logo a:hover img {\r\nopacity: 0;\r\n}\r\n\r\n.logo a:hover {\r\nbackground: url(http:\/\/domain.com\/folder\/hover-logo.png) no-repeat;\r\n}<\/pre>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-6192","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\/6192","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=6192"}],"version-history":[{"count":6,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/6192\/revisions"}],"predecessor-version":[{"id":13877,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/6192\/revisions\/13877"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=6192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=6192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=6192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}