lfang2 Posted April 20, 2022 Share Posted April 20, 2022 Site URL: https://terrier-plane-hgbb.squarespace.com/portfolio Hi, I research on here and google ways to toggle or hide the floating menu on mobile view. I tried various code but couldn't find a way to do it. Its case study for UX design and I want the viewer to be able to hide the floating menu when in mobile so it doesn't take up the screen. https://terrier-plane-hgbb.squarespace.com/portfolio password: leslie Thank you for the help. Link to comment
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 Hi, Do you use Personal or Business Plan? Each plan will need a different solution Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
lfang2 Posted April 25, 2022 Author Share Posted April 25, 2022 Hi Tuan, I have the Personal plan. :x So far I manage to get it to change color upon hover. I would prefer a small toggle to hide the menu. I am think perhaps something similar to this? Would it possilbe to do on the personal plan. Link to comment
lfang2 Posted April 25, 2022 Author Share Posted April 25, 2022 And I'm not sure what happen but my before & after section images are not showing up. Did I type something in the code that broke it? I tested it by creating a simple list on another page and images show up. Link to comment
lfang2 Posted April 26, 2022 Author Share Posted April 26, 2022 1 hour ago, lfang2 said: And I'm not sure what happen but my before & after section images are not showing up. Did I type something in the code that broke it? I tested it by creating a simple list on another page and images show up. Ok, It the code block that cause this issues. Quote <ul class="tp-float-buttons"> <li><a href="#research">Research</a></li> <li><a href="#ideation">Ideation & Lo Fi</a></li> <li><a href="#evaluation">Evaluation & Iteration</a></li> <li><a href="#highfi">High-Fi Design</a></li> <li><a href="#documentation">Doucmentation</a></li> </ul> <style> ul.tp-float-buttons { position: fixed; top: 65%; left: 6px; z-index: 999; list-style: none; padding-left: 6px; margin: 10; } ul.tp-float-buttons a { color: lightgrey; background-color: transparent; padding: 6px; margin-bottom: 10px !important; display:left-block; min-width: 25px; text-align: left; } } How would I go about fixing this in the CSS? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment