How to add site logo on mobile menu


#1

Hi,

I would like to put my logo next to the “fa-bars” on my responsive top navigation menu which it’s fixed.
When I edit header.php, the logo appears below the top bar.
I would like the logo to be centered and on the same line of the “fa-bars” but not in the button.

In order to access to my website, I send you an email.

Best regards,
Marion.


#2

Hi there…
Please send your site URL here: awan.rimbawan101 at gmail

Regards,
Awan


#3

Hi…

I just checked your site. You can add the logo to the top bar using these javascript code snippet using TC Javascript plugin:

var logo = jQuery('<img/>').attr('src', 'http://test.yiondelyon.fr/wp-content/uploads/2017/02/yiondelyon-logo-bandeau-36x36.png').attr('id', 'top-logo').addClass('visible-sm visible-sm-block');

jQuery('#site-navigation').append(logo)

Then add these CSS code into CUstomize > additional CSS:

img#top-logo {
    position: absolute;
    top: 10px;
    width: 61px;
    left: 90px;
}

After you add the code in above, you do not need the custom code in your header.php anymore.

Regards,
Awan


#4

Hi,

Thanks for your help. I’ve done what you said with a little modification in the CSS code:

img#top-logo {
    position: absolute;
    top: 7px;
    left: 47%;
}

But when the screen’s width is lower than 767, there’s no logo anymore.

Regards,
Marion.


#5

Ah I see… Please replace the javascript code in above using this:

var logo = jQuery('<img/>').attr('src', 'http://test.yiondelyon.fr/wp-content/uploads/2017/02/yiondelyon-logo-bandeau-36x36.png').attr('id', 'top-logo').addClass('visible-sm visible-sm-block visible-xs visible-xs-block');

jQuery('#site-navigation').append(logo)

#6

Thanks for your help, it works well !


#7

Glad to hear that :slight_smile:


#8

Hi I’m having the same problem adding a logo for my mobile website. I tried the following code but the height of header is increased.