Infinity Pro Offscreen Content Button in mobile view

[bradm413]

I'm trying to figure out why the offscreen content button stays on the page as you scroll in the mobile responsive view. In the regular desktop view, the top nav bar stays, so it looks fine. But when it switches to mobile view, the menu goes away, but the offscreen content button in the upper right corner stays on the screen and gets laid over content as you scroll down. It doesn't look good that way, so I'm thinking I've messed something up.

http://test.genesisbay.com/about

Thanks!

Brad

http://test.genesisbay.com/about/

[Victor Font]

It stays on the screen because the position is set to fixed in the .offscreen-content-icon, .offscreen-content-toggle class at line 1681 in style.css.

If you want to change this behavior, you have to create a media query class and change the position to relative or hide the offscreen button entirely.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[bradm413]

Hi Victor,

Thank you for always responding and helping so graciously those of us who aren't to your level yet 🙂

I am just getting into responsive design coding, but I have done a little research on W3schools and I think I grasp the concept.

Would it be possible to make this the original "icon" when the screen size is within this class: @media only screen and (max-width: 600px) ?

Another thought I had was to hide that button if it's below 600px and then reveal a menu item that is only visible below 600px screen size.

Any thoughts on that and what would be best practice?

[bradm413]

I have another example of this (actually the live implementation of it) here:

https://beyouniquedesigns.net

[Author]

Posts