Remove normal menu, only display hamburger toggle

Hello @norequests

Yes, you can display an alternative logo on mobile devices.

Here’s a screenshot of the setting.

And use the Menu Breakpoint option to display the Hamburger Icon.

I hope that helps.

Regards,
Suman

Hello @norequests

Yes, for this requirement you can set the Menu Breakpoint to the 2000px so that below that screen size you will see the Hamburger Menu.

I hope that helps.

Regards,
Suman

Hello @norequests

To display an alternative logo on mobile devices.

Here’s a screenshot of the setting.

I did provide the same previously, or am I missing something.

Looking forward to hearing from you!

Regards,
Suman

Hi @norequests,

Ya, I follow ya. I wouldn’t change that breakpoint. Just my preference.

For a pure CSS solution, you can use the following trick. Warning, the mobile logo will not be a link anymore. Might be able to do this better with JavaScript?

/* Let's Mix-up the Logo For Mobile */
@media screen and (max-width: 767.998px) {
  /* Hide the Main Logo */
  .custom-logo {
	  display: none;
  }
  /* Insert a different logo as the background. */
  .site-logo-img {
	  display: inline-block;
	  background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png?w=65&zoom=2);
	  background-repeat: no-repeat;
	  width: 65px;
	  height: 65px;
  }
}

Tweak the breakpoint, image link (obviously), and dimensions for your case 😉

Good luck!

• This reply was modified 6 years, 3 months ago by mark l chaves. Reason: Clarification

Hello @norequests

And thanks @mlchaves for jumping in to help resolve his query.

Do let us know if there’s anything else we can help you with.

Regards,
Suman