Superfly Menu Problem

[jankailsherri]

MOBILE ISSUE

Having problems with hamburger menu on every page but the homepage. It appears all black. When clicked on it turns white and shows correctly. Changed all color options but it won’t change the main hamburger icon to white background with black icon/lines.

The social icons also disappear when using any page other than the homepage.

Please help trying to launch right now

[Prasant]

Hello @jankailsherri,

Thanks for asking and apologies for the trouble you may be facing.

I checked you website that’s assigned in licence manager (URL in secure note). On home page and inner pages I see social icons displaying absolutely fine in Superfly menu section. Hamburger menu menu is black in color on home and inner pages (I am not sure why you want to change into white as it won’t be recognisable as you have white background). I am sharing couple of screenshots, please take a look. Kindly let me know if I misunderstood your question or if I am missing something.

Home page:

Inner page:

Thanks.

[jankailsherri]

All of this looks good but on mobile the button turns all black the line too so you don’t know it’s a hamburger button?

[Prasant]

Hello @jankailsherri,

Thanks for updating the thread.

Yes, I see that default Hamburger menu is showing up in mobile devices. Regarding Superfly menu, please make sure that Show is selected under Superfly Menu > General Display Rules > Show on Mobiles.

If you would like remove default hamburger menu, please add following CSS under X > Theme Options > CSS:

.x-btn-navbar, .x-btn-navbar.collapsed {
    display: none;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.