[karamjbParticipant]

Hello!

I would like to replace the logo in the mobile versions to a different logo (with different proportion).

I don’t know if related, but also I have a problem with the position of the hamburger icon in the mobile. It is positioned in top of the header and I would like it to be in the vertical middle.

can you help?

url
http://karamjb.s158.upress.link/

Thanks!

[Rue NelModerator]

Hello There,

Thanks for writing in! To replace the logo in smaller screens, please add the following JS code in the customizer, Appearance > Customize > Custom > Edit Global Javascript

jQuery(function($) {
 $(document).on('ready', function(){
  var W = $(window).width();
  if ( W > 979 ) {
    $( 'a.x-brand.img img' ).attr('src','http://domain.com/your/logo/when/screen/is/large.jpg'); 
  } else {
    $('a.x-brand.img img' ).attr('src','http://domain.com/your/logo/when/screen/is/small.jpg'); 
  }
 });
});

Please make sure to insert the correct urls of the logo images. The code above will replace the logo upon loading the page. Resizing the browser will not change the logo images.

Hope this helps.

[karamjbParticipant]

That’s great! Thanks!

also, how can I change the size and position of the logo and menu icon?
I would like the button to vertical centered in the header and in the same distance from the left as from the top.
I would like the logo to smaller and to be in the same line as the menu icon and vertical centered in the header.

http://karamjb.s158.upress.link/

[Rue NelModerator]

Hello There,

I’m glad that it works for you. To change the size and proportion of your logo and menu icon on smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media(max-width: 767px){
  .masthead-stacked .x-brand {
    max-width: 70%;
    margin-left: 30px;
  }
}

Hope this helps. Kindly let us know.

[Author]

Posts