Mobile/tablet menu - floating

Hi, is it possible to make the currently fixed mobile menu also floating?
Another question, what is the css style id to change the background color of the mobile menu to replace the deep blue that comes stock?

I also noticed that Google fonts and fa-icons were not operating flawlessly.

Site here

Br,
W

Hi,

  1. No, we keep it deactivated because it might not work properly on some phones.
  2. You can use [off-canvas*=left] { background-color: #000; }
  3. Not sure what you mean regarding the fonts. They look fine to me.

Hi Vlad,

Thanks for the answers.

  1. Could you please answer to this thread if you change this setup?
  2. That worked, thank you.
  3. I had problems with getting the Body Font to function with Google Fonts, but it was apparently a case sensitivity problem, since it started working after changes.

Fa-icons are still unvisible in mobile and tablete site “footers” though. I´m not using the stock footer at the moment.

Hi,

  1. Sure.

Note that Talon doesn’t load Fontawesome, it loads Elegant Line Icons: https://athemes.com/documentation/et-icons/
However, you can load your own icons from a CDN by going to Customize > Icons.
For FA the link is: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

Thanks, I´ll try those et-icons.

One thing I noticed what you might be interested of:
Now that I browsed my site with (iPhone - Safari, Huawei - Chrome and Lumia Win - IE) phones, that Androids Chrome browser is “bouncing” the very end of the page in a way that leaves the very bottom of it unvisibile.

I have the selfmade menu located there, that I made because the lack of floating menu. And I have to work around that also somehow.

I see what you mean. Leave it like this for a bit, I’ll see if I can help.

Try this please:


@media screen and (max-width: 600px) {
	#pg-1130-3 {
		display: none;
	}
}

It targets the row you’re hiding on tablets and hides its wrapper too. Seems that the empty wrapper is somehow causing this bouncing effect in your current setup.

Ok, I see. But that code did not work.

Sorry, it’s #pg-1130-4 instead of #pg-1130-3

yeah that works! Thanks for the support! Let me know if you get the floating menu working!

Br,
W

oh, one more thing I spotted:

when you hit the pop-up contact button in iPad horizontal mode and you have few tabs open in browser, then it hides the upper half of the icons as they don´t fit in the screen.

That’s just Safari’s poor support for flex elements.
Try adding this please as a quick fix:


.contact-popup { min-height: 100%; }

Yeah, Safari works in mysterious ways sometimes… That code didn´t help it.

Change it to this please:


.contact-popup { min-height: 100%; height:auto;}

That´s a bit better. Still leave tiny bit off of the top of the icons. Also cuts the bottom of the send button at bottom.

I can live with it. Cheers.

Regarding a part to the original question “what is the css style id to change the background color of the mobile menu to replace the deep blue that comes stock”.

I used the CSS Code [off-canvas*=left] { background-color: #000; } but this did not change the top of the mobile menu where the logo is located. I would like to change that colour as well.

Thanks

@Jason Richard:

Use this please:


.mobile-branding { background-color: #000; }