Docs

[Trevor M]

Hello,

Lely was so gracious to help me add a custom logo to the left of my superfly hamburger menu. Currently the logo and the hamburger trigger the superfly menu to open. I would like for the hamburger function to stay the same, but make the logo box to the left function as a link to my home page.

Here is my site: http://riveteng.com
Here is my previous thread where I was helped by Lely: https://community.theme.co/forums/topic/superfly-add-logo-next-to-hamburger-button/

[Trevor M]

This reply has been marked as private.

[Rupok]

Hi there,

The trigger functionality could be removed but if you want to add link then it won’t be possible with that setup. In that case remove the previous CSS and add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  var html = '<a href="http://riveteng.com" class="header-logo"><img src="http://riveteng.com/wp-content/uploads/2017/02/rivet-menu-button-2.png"></a>';
  $( html ).appendTo('.sfm-navicon-button');
});

Then use this CSS :

.header-logo > img {
  width: 80px;
  display: block;
  position: absolute;
  left: -82px;
  top: 1px;
  background-color: #000;
}

Cheers!

[Trevor M]

Rupok, using the CSS and javascript removes my logo to the left of the hamburger completely.

[Trevor M]

I can’t quite get this figured out.

[Lely]

Hello Trevor,

I found the following HTML at the end of your custom Javascript:

<div id="floatingbox">
<a href="http://www.kaisteventures.com/kaiste1/contact-us">CONTACTUS</a>/</div>

That is considered syntax error and will prevent the code from working. I did removed it and the logo is now showing. We just need to adjust position.
Look for this CSS:

.header-logo > img {
  width: 80px;
  display: block;
  position: absolute;
  left: -82px;
  top: 1px;
  background-color: #000;
}

Adjust -82px to -74px. Then adjust 120% from Superfly > Button Tab > Horizontal Shift to 186%

Hope this helps.

[Trevor M]

While this has brought the logo back on screen,in the correct location, and when I hover it I can see the URL to my home page… when clicked it just triggers the skewed menu to slide out, not take me to the URL (my home page).

[Rupok]

Hi there,

Thanks for writing back. All anchors within that area will trigger the menu. So we need to use a different route. Let’s remove all CSS and JS and use the below codes instead :

JavaScript :

jQuery(document).ready(function($) {
  var html = '<a href="http://riveteng.com" class="header-logo"><img src="http://riveteng.com/wp-content/uploads/2017/02/rivet-menu-button-2.png"></a>';
  $( html ).appendTo('.sfm-rollback');
});

CSS :

.header-logo {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 99;
  width: 74px;
}

.header-logo > img {
  display: block;
  background-color: #000;
  width: 100%;
}

.sfm-navicon-button {
  margin-left: 20px;
}

Hope this helps.

Cheers!

[Trevor M]

Awesome, it works perfectly! Thank you so much!!

[Jade]

You’re most welcome, Trevor.

[Trevor M]

So this has been functioning great, except the logo box is periodically / randomly not appearing on my site. I have not been able to identify what is causing this, or even when. It feels very random. It appears some times but not others. Can you please help resolve this ASAP??

[Nico]

Hi There,

Upon checking your setup, I could not replicate the issue of the logo box not showing. Would you mind sharing us the details on your setup that you are using. Browser,version and computer. Please clear server, site and browser cache also before checking again.

Thanks.

[Trevor M]

Hey Nico, two of my friends had the issue happening for them as well, so i know it’s not specific to me. Using chrome, windows 10 – all updated to the most recent versions. My site theme/plugins are all updated as well.

I did go in and resave the custom java/css in customizer hoping that would do something. And it hasn’t replicated again for me the past 20 mins. I’ll touch back if it comes back.

[Rue Nel]

No problem. Please let us know then.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Trevor M]

Hello, I’ve changed nothing and the issue is happening again. The logo is not visible currently on my home page. See screenshots

[Author]

Posts