Known issue: the menu is not hidden after clicking on the links. You have to close it with the icon.
I could not solve this only with HTML / CSS. Does anyone know if it is possible (with pure HTML / CSS)?
I know that with JS it is possible, but I donât want to add js until I study it.
I would appreciate your feedback, especially if you find any error or aspect to improve.
A small thing: the X to close the menu must be clicked exactly on he line. Maybe you could add a larger transparent container to make it easier to click âŠ
I like the fact you are giving the âtable of contentsâ makes it easier to find parts of css.
The class names seem to be readable. One thing that I would improve is make sure that section class name is not the same as id of a element inside it. I.E and .
Checkout BEM if you have not yet read on it: http://getbem.com/introduction/
Regarding your question
I donât know how to do this without javascript.
With js it is quite easy to do.
Check this out:
// 1. Find the navbar
const navBar = document.querySelector('.nav');
// 2. Run when navbar is clicked
navBar.addEventListener('click', ()=>{
// 3. Find the checked button
const navButton = document.querySelector('.nav-btn');
// 4. Change the hamburger to not checked to close the menu
navButton.checked = false;
})
Hey @MartaFagundez! Love your project.
I am a complete begginer, so Iâm sorry if the next question is stupid in any way.
I really like the cactus and succulents icons youâve provided. Have you created them yourself? Or is there a place on the internet for this kind of icons? Good job with the product page. Keep up the good work.
Hi @Wallachian! Thanks for your feedback
For the succulent icons, what I did was to download the free vector drawings from Freepik and then I edited them in Illustrator to change the color and add the green circle.
Stunning simplicity and beauty, love it. An eye like that for design is not something you learn easily (I spend more time making my stuff not look terrible than coding it).
As for the navbar closing with CSS only, I donât know if thatâs even possible.
If you want to implement it using JS, hereâs my solution
@DawidGaleziewski solution will work, but the navbar will be closed if you click anywhere within it, adding the event listener to the links themselves solves this. Also I do agree with him that BEM is worth checking, it will be specially useful if you learn SASS.
A couple of suggestions:
The way the hamburger button is set makes it only work if you click only the lines themselves, which can be frustrating for the user. After a quick glance at the code I saw you used an approach I didnât really expect. I donât really do navbar toggling with CSS, but if I remember correctly, the usual approach was creating a checkbox, setting itâs opacity to 0, then designing the hamburger button on top of it. Just letting you now in case you want to dig further in this, but again, this is just me being picky.
Why not adding smooth scrolling?
If I had to be picky (again), the video looks a bit âoffâ to me, I think adding some shadow, a bottom border (like a stand maybe) in that green color used through the page would make it blend perfectly. Just my two cents.
But overall, if I were a recruiter, I would probably hire you on the spot seeing the rest of your projects. Keep it up!
Hi @Stahlone! Thank you very much for the time you have invested in your detailed feedback, I appreciate it very much.
Iâm glad you liked the design!
When I carry out an FCC project, my goal is to create it as if it were for a real client (within my current possibilities and limitations). With that idea in mind the design is, in my case - at least - 50% of the work.
I know that I could move faster on my certifications if I only focused on the code, but as I see it, doing it as I do prepares me better for the real world of work.
If I later work as a freelance, I will feel more able to define what I can do and how much time / effort it will cost me (therefore, how much I would like to charge ).
If I find work as part of a team, where a designer is in charge of design, then I will find myself better prepared to understand their ideas and eventually be able to have constructive discussions when necessary. Because one thing is the possibilities of a design environment and another quite different what is possible and desirable in a web environment (considering responsiveness, accessibility, etc. ).
With regard to your suggestions, I thank you very much and I will consider them after I finish the technical documentation project, which I am currently working on.
Wow Marta! Your design is very good and clean! Well done!
Regarding the issue of the links, sounds to me that colsing the menu requires listening to a click event anyway, so Iâm not sure this is achievable with pure HTML & CSS.
I think itâs possible to make the menu appear and disappear once you click a link by using the :hover CSS pseudoclass. I tried something similar using a tutorial from another website but I have not tested it on a mobile device. I am not sure I understood it myself so I wonât venture to explain, but it can be found online (not sure if weâre allowed to link to other resources apart from FCC).
Itâs an awesome design by the way. Love the minimalist and professional look!