{"id":10,"date":"2021-12-21T17:52:32","date_gmt":"2021-12-21T17:52:32","guid":{"rendered":"https:\/\/wpconfidence.co\/?p=10"},"modified":"2023-08-01T15:13:43","modified_gmt":"2023-08-01T15:13:43","slug":"wordpress-logo-size","status":"publish","type":"post","link":"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/","title":{"rendered":"How to Change the WordPress Logo Size in Any Theme"},"content":{"rendered":"\n<p>If you&#8217;ve uploaded your logo in WordPress but it looks too big or too small, then read on.<\/p>\n\n\n\n<p>Because in this post, you&#8217;ll learn <strong>how to change the WordPress logo size<\/strong> in any WordPress theme.<\/p>\n\n\n\n<p>Even if you&#8217;re using a theme that doesn&#8217;t let you adjust the logo size within the customizer, this post will help you.<\/p>\n\n\n\n<p>Let&#8217;s get started.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_64 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-662149a6122dc\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #222222;color:#222222\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #222222;color:#222222\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-662149a6122dc\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#change-the-wordpress-logo-size-even-if-your-theme-doesnt-allow-it\" title=\"Change the WordPress Logo Size Even If Your Theme Doesn&#8217;t Allow It\">Change the WordPress Logo Size Even If Your Theme Doesn&#8217;t Allow It<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#using-css-to-change-the-wordpress-logo-size\" title=\"Using CSS to Change the WordPress Logo Size\">Using CSS to Change the WordPress Logo Size<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#how-to-change-the-wordpress-logo-size-in-generatepress\" title=\"How to Change the WordPress Logo Size in GeneratePress\">How to Change the WordPress Logo Size in GeneratePress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-1-open-the-theme-customizer\" title=\"Step 1: Open the theme customizer\">Step 1: Open the theme customizer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-2-click-on-site-identity\" title=\"Step 2: Click on Site Identity\">Step 2: Click on Site Identity<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-3-edit-these-settings\" title=\"Step 3: Edit these settings\">Step 3: Edit these settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-4-you-can-use-the-slider-or-type-it-in\" title=\"Step 4: You can use the slider or type it in\">Step 4: You can use the slider or type it in<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-5-spacing-options\" title=\"Step 5: Spacing options\">Step 5: Spacing options<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-6-click-publish\" title=\"Step 6: Click Publish\">Step 6: Click Publish<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#how-to-change-the-wordpress-logo-size-in-astra\" title=\"How to Change the WordPress Logo Size in Astra\">How to Change the WordPress Logo Size in Astra<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-1-click-the-customizer\" title=\"Step 1: Click the customizer\">Step 1: Click the customizer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-2-click-on-layout\" title=\"Step 2: Click on Layout\">Step 2: Click on Layout<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-3-click-on-header\" title=\"Step 3: Click on Header\">Step 3: Click on Header<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-4-then-click-site-identity\" title=\"Step 4: Then click Site Identity\">Step 4: Then click Site Identity<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-5-edit-these-options\" title=\"Step 5: Edit these options\">Step 5: Edit these options<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-6-logo-width-slider-in-astra\" title=\"Step 6: Logo width slider in Astra\">Step 6: Logo width slider in Astra<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-7-thats-it\" title=\"Step 7: That&#8217;s it!\">Step 7: That&#8217;s it!<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#how-to-change-the-wordpress-logo-size-in-divi\" title=\"How to Change the WordPress Logo Size in Divi\">How to Change the WordPress Logo Size in Divi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-1-click-theme-options\" title=\"Step 1: Click Theme Options\">Step 1: Click Theme Options<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-2-upload-your-logo\" title=\"Step 2: Upload your logo\">Step 2: Upload your logo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-3-go-to-the-theme-customizer\" title=\"Step 3: Go to the Theme Customizer\">Step 3: Go to the Theme Customizer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-4\" title=\"Step 4\">Step 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#step-5-and-youre-done\" title=\"Step 5: And you&#8217;re done!\">Step 5: And you&#8217;re done!<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"change-the-wordpress-logo-size-even-if-your-theme-doesnt-allow-it\"><\/span>Change the WordPress Logo Size Even If Your Theme Doesn&#8217;t Allow It<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you&#8217;re using a theme like Divi, GeneratePress, Astra or any others that let you change the logo size in the customizer, then congrats!<\/p>\n\n\n\n<p><a href=\"#scroll-jump\">Scroll below<\/a> for a tutorial on all these themes.<\/p>\n\n\n\n<p>However, if you&#8217;ve already checked your settings and your theme doesn&#8217;t have the option, here&#8217;s how to change the logo size using CSS.<\/p>\n\n\n\n<p>Don&#8217;t worry, it&#8217;s easy if you follow my steps below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"using-css-to-change-the-wordpress-logo-size\"><\/span>Using CSS to Change the WordPress Logo Size<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>CSS stands for Cascading Style Sheet. Basically, it&#8217;s a language which tells the browser how to style different elements on the page.<\/p>\n\n\n\n<p>Let&#8217;s use CSS to change the style of the logo size.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Inspect the element<\/h4>\n\n\n\n<p>Right-click anywhere in your browser and you\u2019ll see something like \u2018Inspect\u2019 or \u2018Inspect Element\u2019. Click on that to view the source code of the page:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"371\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-css-inspect-element.png\" alt=\"\" class=\"wp-image-137\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-css-inspect-element.png 643w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-css-inspect-element-250x144.png 250w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Click the element highlighter<\/h4>\n\n\n\n<p>A window will popup with an icon that looks like this:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"361\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-css-highlight-elements.png\" alt=\"\" class=\"wp-image-138\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-css-highlight-elements.png 633w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-css-highlight-elements-250x143.png 250w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/figure><\/div>\n\n\n\n<p>Click on it. This will highlight all the elements on the page when you hover over them with the mouse.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Note down the logo element<\/h4>\n\n\n\n<p>Hover your mouse over the logo and note the text that pops up:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"825\" height=\"307\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-css-find-css-class-825x307.png\" alt=\"\" class=\"wp-image-139\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-css-find-css-class-825x307.png 825w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-css-find-css-class-250x93.png 250w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-css-find-css-class-768x286.png 768w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-css-find-css-class.png 876w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/figure><\/div>\n\n\n\n<p>This is the CSS class you&#8217;ll need to target to change the size of the logo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Open the theme customizer<\/h4>\n\n\n\n<p>Then open the theme Customizer and click on Additional CSS:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"218\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-css-click-additional-css.png\" alt=\"\" class=\"wp-image-140\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-css-click-additional-css.png 368w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-css-click-additional-css-250x148.png 250w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Add some CSS code<\/h4>\n\n\n\n<p>Now add the following CSS code to adjust the size of your logo:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"250\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-css-enter-css-snippet.png\" alt=\"\" class=\"wp-image-142\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-css-enter-css-snippet.png 392w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-css-enter-css-snippet-250x159.png 250w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/figure><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>.my-css-class img { \n  max-height: 65px !important;\n}<\/code><\/pre>\n\n\n\n<p>Replace <strong>.my-css-class<\/strong> with your own CSS class you found in the element highlighter.<\/p>\n\n\n\n<p>As you can see in the above picture, my CSS class is <strong>.site-title-wrapper<\/strong> but yours could be different depending on the theme you&#8217;re using.<\/p>\n\n\n\n<p>Once you&#8217;ve added the code, see the logo change in size. You can adjust the max-height value to get the desired size of your logo.<\/p>\n\n\n\n<p>Click on publish and you&#8217;re done!<\/p>\n\n\n\n<p>The following tutorials will guide you through changing the logo size in several popular WordPress themes, although it&#8217;s a fairly similar process for any theme that allows it inside the Customizer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"scroll-jump\"><span class=\"ez-toc-section\" id=\"how-to-change-the-wordpress-logo-size-in-generatepress\"><\/span>How to Change the WordPress Logo Size in GeneratePress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Follow these steps to change the GeneratePress logo size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-1-open-the-theme-customizer\"><\/span>Step 1: Open the theme customizer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> In your WordPress Dashboard, click on the theme Customizer:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"396\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize.png\" alt=\"\" class=\"wp-image-143\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize.png 289w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize-182x250.png 182w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-2-click-on-site-identity\"><\/span>Step 2: Click on Site Identity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Open the option Site Identity inside the customizer:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"429\" height=\"466\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-generatepress-click-site-identity.png\" alt=\"\" class=\"wp-image-144\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-generatepress-click-site-identity.png 429w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-generatepress-click-site-identity-230x250.png 230w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-generatepress-click-site-identity-368x400.png 368w\" sizes=\"(max-width: 429px) 100vw, 429px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-3-edit-these-settings\"><\/span>Step 3: Edit these settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Hide the site title, upload your logo and then use the slider to select your logo width:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"741\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-generatepress-logo-settings.png\" alt=\"\" class=\"wp-image-145\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-generatepress-logo-settings.png 373w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-generatepress-logo-settings-126x250.png 126w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-generatepress-logo-settings-201x400.png 201w\" sizes=\"(max-width: 373px) 100vw, 373px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-4-you-can-use-the-slider-or-type-it-in\"><\/span>Step 4: You can use the slider or type it in<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>I&#8217;ve chosen my logo size to be 250px, but you can decide on whatever suits your website best:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"383\" height=\"235\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-generatepress-logo-width.png\" alt=\"\" class=\"wp-image-146\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-generatepress-logo-width.png 383w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-generatepress-logo-width-250x153.png 250w\" sizes=\"(max-width: 383px) 100vw, 383px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-5-spacing-options\"><\/span>Step 5: Spacing options<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Here&#8217;s an example of what my logo looks like. If you have GeneratePress Pro, then you will also have spacing options above and below the logo:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"419\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-generatepress-logo-example.png\" alt=\"\" class=\"wp-image-147\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-generatepress-logo-example.png 610w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-generatepress-logo-example-250x172.png 250w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-generatepress-logo-example-582x400.png 582w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-6-click-publish\"><\/span>Step 6: Click Publish<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Click on Publish and you&#8217;re done changing the logo size in GeneratePress:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"346\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/6-generatepress-click-publish-to-save.png\" alt=\"\" class=\"wp-image-148\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/6-generatepress-click-publish-to-save.png 479w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/6-generatepress-click-publish-to-save-250x181.png 250w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-change-the-wordpress-logo-size-in-astra\"><\/span>How to Change the WordPress Logo Size in Astra<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here&#8217;s how to change the Astra theme logo size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-1-click-the-customizer\"><\/span>Step 1: Click the customizer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> In your WordPress Dashboard, click on the theme Customizer:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"396\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize.png\" alt=\"\" class=\"wp-image-143\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize.png 289w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize-182x250.png 182w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-2-click-on-layout\"><\/span>Step 2: Click on Layout<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> Then click on <strong>Layout<\/strong> inside the customizer:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"398\" height=\"349\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-astra-click-layout.png\" alt=\"\" class=\"wp-image-150\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-astra-click-layout.png 398w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-astra-click-layout-250x219.png 250w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-3-click-on-header\"><\/span>Step 3: Click on Header<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> Then click on <strong>Header<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"253\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-astra-click-header.png\" alt=\"\" class=\"wp-image-151\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-astra-click-header.png 400w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-astra-click-header-250x158.png 250w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-4-then-click-site-identity\"><\/span>Step 4: Then click Site Identity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>And click <strong>Site Identity<\/strong> to access the logo settings in Astra:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"399\" height=\"245\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-astra-click-site-identity.png\" alt=\"\" class=\"wp-image-152\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-astra-click-site-identity.png 399w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-astra-click-site-identity-250x154.png 250w\" sizes=\"(max-width: 399px) 100vw, 399px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-5-edit-these-options\"><\/span>Step 5: Edit these options<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You&#8217;ll then see the Logo settings. Upload your logo, choose your Logo width and uncheck the Display Site Title box:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"388\" height=\"610\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-astra-logo-settings.png\" alt=\"\" class=\"wp-image-153\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-astra-logo-settings.png 388w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-astra-logo-settings-159x250.png 159w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5-astra-logo-settings-254x400.png 254w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-6-logo-width-slider-in-astra\"><\/span>Step 6: Logo width slider in Astra<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can use the Logo Width slider or type in the number in the box. I&#8217;ve set my logo width at 245px:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"383\" height=\"235\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-generatepress-logo-width-1.png\" alt=\"\" class=\"wp-image-154\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-generatepress-logo-width-1.png 383w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-generatepress-logo-width-1-250x153.png 250w\" sizes=\"(max-width: 383px) 100vw, 383px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-7-thats-it\"><\/span>Step 7: That&#8217;s it!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Here&#8217;s what my logo looks like after setting the width. Click on Publish to save your changes and you&#8217;re done:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"298\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/7-astra-logo-example.png\" alt=\"\" class=\"wp-image-155\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/7-astra-logo-example.png 647w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/7-astra-logo-example-250x115.png 250w\" sizes=\"(max-width: 647px) 100vw, 647px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-change-the-wordpress-logo-size-in-divi\"><\/span>How to Change the WordPress Logo Size in Divi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>And finally, here&#8217;s how to change the Divi theme logo size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-1-click-theme-options\"><\/span>Step 1: Click Theme Options<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In the WordPress Dashboard, click on Theme Options under the Divi settings:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"396\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize.png\" alt=\"\" class=\"wp-image-143\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize.png 289w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/1-all-themes-click-customize-182x250.png 182w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-2-upload-your-logo\"><\/span>Step 2: Upload your logo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You&#8217;ll then see the Divi settings where you can upload your logo. Don&#8217;t forget to save your changes:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"342\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-divi-add-logo-and-click-save-1024x342-1.png\" alt=\"\" class=\"wp-image-156\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-divi-add-logo-and-click-save-1024x342-1.png 1024w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-divi-add-logo-and-click-save-1024x342-1-250x83.png 250w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-divi-add-logo-and-click-save-1024x342-1-825x276.png 825w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/2-divi-add-logo-and-click-save-1024x342-1-768x257.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-3-go-to-the-theme-customizer\"><\/span>Step 3: Go to the Theme Customizer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> Then click on <strong>&#8220;Theme Customizer&#8221;<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"293\" height=\"363\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-divi-click-theme-customizer.png\" alt=\"\" class=\"wp-image-157\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-divi-click-theme-customizer.png 293w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/3-divi-click-theme-customizer-202x250.png 202w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Then, click on <strong>&#8216;Header and Navigation&#8217; &gt; &#8216;Primary Menu  Bar&#8217;<\/strong> to view the Divi logo settings:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"368\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-divi-logo-settings.png\" alt=\"\" class=\"wp-image-158\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-divi-logo-settings.png 366w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-divi-logo-settings-250x250.png 250w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/4-divi-logo-settings-150x150.png 150w\" sizes=\"(max-width: 366px) 100vw, 366px\" \/><\/figure><\/div>\n\n\n\n<p>This is where Divi is slightly different.<\/p>\n\n\n\n<p>First choose the height of the header by selecting the <strong>&#8216;MENU  HEIGHT&#8217;<\/strong>. I&#8217;ve set mine at 65px and then the <strong>&#8216;LOGO MAX HEIGHT&#8217;<\/strong> is a percentage of the menu height.<\/p>\n\n\n\n<p>So if you choose 100, then it&#8217;ll be the full height of the header with no space above and below. I&#8217;ve set mine at 80% so there&#8217;s a little space. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"step-5-and-youre-done\"><\/span>Step 5: And you&#8217;re done!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Here&#8217;s what my logo looks like with these settings. Click on Publish to save your changes:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"825\" height=\"191\" src=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5.divi-logo-example-825x191.png\" alt=\"\" class=\"wp-image-160\" title=\"\" srcset=\"https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5.divi-logo-example-825x191.png 825w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5.divi-logo-example-250x58.png 250w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5.divi-logo-example-768x178.png 768w, https:\/\/wpconfidence.co\/wp-content\/uploads\/2021\/12\/5.divi-logo-example.png 905w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>As you can see, it&#8217;s easy to change the logo size for wordpress and most themes achieve this in a similar way.<\/p>\n\n\n\n<p>You can also use <a href=\"https:\/\/wpconfidence.co\/how-to-add-css-in-wordpress\/\" data-type=\"post\" data-id=\"5\">CSS code<\/a> if your theme doesn&#8217;t have the settings to change the logo size in the theme customizer.<\/p>\n\n\n\n<p><strong>Read Next:<\/strong> <a href=\"https:\/\/wpconfidence.co\/how-to-edit-copyright-in-wordpress\/\" data-type=\"post\" data-id=\"7\">How to Edit Copyright Text in WordPress<\/a><\/p>\n\n\n\n<p class=\"has-small-font-size\">Photo by <a href=\"https:\/\/unsplash.com\/@uxindo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">UX Indonesia<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/web-design?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve uploaded your logo in WordPress but it looks too big or too small, then read on. Because in this post, you&#8217;ll learn how to &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to Change the WordPress Logo Size in Any Theme\" class=\"read-more button\" href=\"https:\/\/wpconfidence.co\/blog\/wordpress-logo-size\/#more-10\" aria-label=\"Read more about How to Change the WordPress Logo Size in Any Theme\">Continue Reading<\/a><\/p>\n","protected":false},"author":2,"featured_media":87,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[17,8,7,16],"acf":[],"_links":{"self":[{"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/posts\/10"}],"collection":[{"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":5,"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/posts\/10\/revisions\/177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpconfidence.co\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}