[zettaininoParticipant]

OK. I tried your suggestion, but the logo is overlapping the hamburger menu.
It’s not positioned at the top-center of the browser (on small devices).

Any suggestions?

[zettaininoParticipant]

Or better yet, could you suggest how to replace the hamburger menu with my logo, only when browsing with smaller devices (<768px) ?

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 767px){
.sfm-navicon-button {
    content: url(http://ec2-54-218-24-252.us-west-2.compute.amazonaws.com/wp-content/uploads/2017/03/logo-icon-e1488768738609.png);
}
}

Hope that helps.

[zettaininoParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

The width of the fixed menu is 80px. Now, we can use this CSS to adjust the content:

div#top {
    padding-left: 80px;
}

Hope this helps.

[zettaininoParticipant]

That worked well. Thanks.

Another issue.
The fixed menu actually has a logo at the middle, as mentioned in #1397462.
But there are times, when the logo doesn’t show up.

Could you suggest a better way (css?) to include the logo so it will always appear as expected.

[RadModerator]

Hi there,

It’s because you added the javascript code like this

      if (document.documentElement.clientWidth > 768) {
	jQuery(document).ready(function($) {
    $(\'<img src=\"http://oliohaus.com/staging/3127/wp-content/uploads/2017/03/logo-icon-50x50.png\" alt=\"\" style=\"top: calc(50% - 15px); position: absolute; left: 15px;\">\').insertAfter( \".sfm-navicon-button\");
	});
}  

It should be like this

jQuery(document).ready(function($) {
    $('<img src="http://ec2-54-218-24-252.us-west-2.compute.amazonaws.com/wp-content/uploads/2017/03/logo-icon-e1488768738609.png" alt="" style="top: 50%; position: absolute; left: 10px;">').insertAfter( ".sfm-navicon-button");
  
});

Thanks!

[zettaininoParticipant]

Ok. I have checked and changed the custom js.
But after a while, the logo doesn’t show up.
It’s inconsistent. sometimes it shows. sometimes not.
*try loading different pages.

[RadModerator]

Hi there,

Hmm, that could be due to loading speed. If that custom script is executed before SuperFly then it will not work. Let’s add some delay

jQuery(document).ready(function($) {
setTimeout( function() {
    $('<img src="http://ec2-54-218-24-252.us-west-2.compute.amazonaws.com/wp-content/uploads/2017/03/logo-icon-e1488768738609.png" alt="" style="top: 50%; position: absolute; left: 10px;">').insertAfter( ".sfm-navicon-button");
 } , 1000 );
});

Thanks!

[Author]

Posts