CODEWITHSUNDEEP
htmlcsswordpress
MLB_27
MLB_27

Reputation: 39

How to increase size of logo in header on Wordpress site

I've added a logo to the header of my website www.theestablishmenthairdressing.com however it comes out very small (logo in the top-left).

I can see by inspecting the code in Safari that it looks like there is a restriction to the size of the logo built into the theme: 

<h1 class="header-logo">
   <a href="http://www.theestablishmenthairdressing.com/" rel="home">
      <img class="" width="50" height="50" src="//www.theestablishmenthairdressing.com/wp-content/uploads/2017/08/Establishment-LOGO-header.png" alt="The Establishment Hairdressing" />                        
   </a>
</h1>

However it's not clear to me how to change this. I've tried adding CSS

h1.header-logo {
    width: 200px !important;
}

To the child theme's style.css however this did not make a difference.

Please help me out of this.

Upvotes: 0

Views: 3432

Answers (4)

mayuri shitut
mayuri shitut

Reputation: 11

http://wpdemos.themezaa.com/pofo/documentation/knowledgebase/logo-typography-and-colors/change-logo-size/

Code for header logo

header a.logo-light img{ max-height: 26px;}

Code for sticky header logo

header a.logo-dark img {max-height: 26px;}

Code for footer logo

.footer-logo { max-height: 26px; }

Code for Hamburger logo

.hamburger-logo img { max-height: 46px; }

Upvotes: 0

Shubham
Shubham

Reputation: 539

Copy the file to the child theme folder in which this code is probably header.php and remove width="50" height="50" from the img tag. Now you can do your changes in style.css.

Upvotes: 2

Chrisstar
Chrisstar

Reputation: 646

Just remove the width and height attributes of the image tag:

<img class="" src="//www.theestablishmenthairdressing.com/wp-content/uploads/2017/08/Establishment-LOGO-header.png" alt="The Establishment Hairdressing">

It should work fine.

Upvotes: 0

Vel
Vel

Reputation: 9257

you should use like below.

    h1.header-logo img {
        width: 200px !important;
    }

or

h1.header-logo>a>img {
        width: 200px !important;
    }

Upvotes: 1

Related Questions