Logo instead of header text but keep button

Hello! I would like to have a logo instead of the header small text (I do not have nor want anything in the Header text). However, I would like to keep the button. Can you please advise me as to how I could do that? Thanks!

Hi there,

To achieve your need, please try this CSS and javascript tricks below:
~ Put this CSS code to the Customizer > additional CSS:

h4.header-subtext, h3.header-text {
    display: none;
}

~ Add this javascript code using this plugin and change the src value with your image path:

jQuery('.header-info .container').prepend('<img width="60" height="54" src="YOUR IMAGE URL HERE" alt="Logo">')

Hope it helps.

Regards,
Awan

Absolutely perfect. Thank you!

1 Like

I increased the size to width 150 and height 150 as it was looking small on the desktop but now its big for the mobile version . Can i have 2 different sizes for mobile and desktop ?

Hi @karanarya,

Change this jQuery('.header-info .container').prepend('<img width="60" height="54" src="YOUR IMAGE URL HERE" alt="Logo">')

to:

jQuery('.header-info .container').prepend('<img class="header-logo-custom" src="YOUR IMAGE URL HERE" alt="Logo">')

Then add this to Customize > additional CSS:

.header-logo-custom{
   width: 100px;
   height: 100px;
}
@media (max-width: 768px){
  .header-logo-custom{
     width: 80px;
     height: 80px;
  }
}