Naks
KPCKevin Powell - Community
•Created by Naks on 10/10/2023 in #front-end
Responsive navbar question - Kevin's video
Hi all, in video below Kevin explains how to create a custom mobile menu which will open and close when user clicks the nav-bar button:
https://www.youtube.com/watch?v=HbBMp6yUXO0&t=2081s
I have copied the code and all is working great except 1 thing - on page load if I resize the browser, the mobile menu will "flash up" as it's transitioning itself on mobile breakpoint, due to this CSS within the .primary-navigation :
@media (max-width: 35em) {
.primary-navigation {
transform: translateX(100%);
transition: transform .4s ease-in-out;
}
}
Is there a way to prevent this? I understand that this is not an issue for end-users because they will either be using the website on mobile or desktop (thus they shouldn't see the flickering menu on mobile breakpoint), but if I were to show this code to my peers they will resize the browser to play around with the navigation and will definitely notice the mobile menu appearing (aka moving across into translateX(100%) position) briefly every time they reach the mobile-view breakpoint.
Is there anyway to fix this? It looks absolutely fine if I resize the window with the mobile menu open, because when I go back to mobile view again menu is already opened = no transitions taking place. But if I close the menu and then re-size the viewport the menu will flicker and scooch across the screen which doesn't look great.12 replies
KPCKevin Powell - Community
•Created by Naks on 6/15/2023 in #front-end
Help settle a debate I have with a designer
10 replies
KPCKevin Powell - Community
•Created by Naks on 5/2/2023 in #front-end
How to create a 'recycled paper' background effect?
WIld one this - looking for help to figure out how to add scattered debris onto the background of a section. Basically the effect should appear like the random squiggles appear on a recycled paper. I have no idea if there is a word for it 😄 Refer to images on these pages to understand what I'm talking about:
https://www.eekwi.org/activities/arts-crafts/make-your-own-paper
https://www.onlygfx.com/old-recycled-paper-texture-jpg/
The particular section in question has something to do with restaurant work, so I'm trying to add a subtle background effect to match their menu which is made of recyclable paper.
Thank you for your time and have a good day/night
P.S. maybe I should offload this task to a designer and ask for some special background image tat I could lay over the section?
2 replies
KPCKevin Powell - Community
•Created by Naks on 4/3/2023 in #front-end
Adding responsive background behind elements
25 replies