Skip to content
OverviewSolutions
2
Comments
5
NotBenjamin
@Aeteung

All comments

  • Bismeet singh•190
    @BismeetSinghSubmitted over 2 years ago

    I struggled a lot while building the nav,specifically the dropdown menu, i had to use position absolute to fix it, otherwise the whole header would expand alongside the menu. I am still not sure whether using an absolute position is the best way to fix it.

    In the original requirements screenshot, the menu is slightly left positioned, I think I would have to use relative positioning to do that, but that breaks the whole header, is there a better way to do it ?

    Is there a way to stop the background from scrolling while the nav is open on a mobile device, I tried using touch-action:none but it didnt work.

    Also, I would appreciate it if any accesibility issues could be highlighted, I tried to fix as many as I could, also used aria-expanded.

    Dropdown navigation using html and css

    1
    NotBenjamin•70
    @AeteungPosted over 2 years ago

    I solved the nav scroll problem by this:

    When hamburger clicked: body.overflowY = hidden; navBar.overflowY = scroll;

    After close button clicked: body.overflowY = scroll

    For the nav part, I think the absolute margin is aesthetically better looking.

    0
  • Dan Kant•310
    @Dan-KantSubmitted over 2 years ago

    There wasn't a particular difficulty in this challenge. However, I couldn't use the desktop image for desktop screens and went with the mobile one since I couldn't scale the height of desktop image. I tried to use max-witdth: 100%; height: auto; but it didn't help. Will be glad to get your feedback.

    A home page with HTML, CSS and JS

    1
    NotBenjamin•70
    @AeteungPosted over 2 years ago

    Hi Dan,

    I am afraid that u used the inappropriate png. If u get the source file correctly, there is an image-hero-desktop.png for the desktop version. I have viewed your project, and I don't think u imported it, and u only used the image-hero-mobile.png in your HTML.

    For me, this challenge is quite difficult tho. Both the mobile and desktop designs are quite different, and it is hard to make them decently. I suggest you use DevTools, which is already installed in all major browsers. It can render your website in different screen sizes as your elements go wrong when I test it in several screen sizes.

    For me, the way I learn CSS is to care more about the details and try to achieve perfection. I hope that is helpful for u. Nice try tho. OuOb

    1
  • Coder Jacko•190
    @coderrJackoSubmitted over 2 years ago

    I would like to know if there are other ways to write and structure HTML and JavaScript code so that both documents are in a nice relation to each other and so I don't have to write this much code. I literally repeated the same things multiple times throughout the project and sometimes I find it overwhelming. General feedbacks are also welcome.

    Intro section with dropdown navigation | SASS | Flexbox

    1
    NotBenjamin•70
    @AeteungPosted over 2 years ago

    I viewed many solutions for this challenge. For me, your layout is on point. There are just a few things to adjust:

    • First of all, I think u can create a function with an element argument in which u can adjust its style or classList, and this can reduce the redundant code.
    • Moreover, there is a function called element.classList.toggle() that can toggle class instead of using add() and remove(). And u can reduce 1 open/close stage.
    • I think u can add an "object-fit: contain" to your img tag as the landscape mobile/tablet size monitor may view your img with a weird scale.
    • I don't know why u use div tag for the dropdown menu but I think using ul and li is a better practice for u to create something like this.
    • For the mobile nav, I think the font-size is a bit too big as the content will overflow when I open those two dropdowns.

    Overall this is a great solution, everything fits the design decently, especially I like how u add a max-width for your content. Well Done. OuOb

    Marked as helpful
    0
  • NotBenjamin•70
    @AeteungPosted over 2 years ago

    Wow, it is such great work. I think this is by far the nicest solution I have ever seen for this challenge(besides mine xD). I just have a few suggestions for the design part:

    • It would be better for u to set a max-width for the navbar as there might be some monitors with a size of 3440 x 1440. This makes the navbar just too wide for them.
    • Setting the font size for the h1 tag width vw unit is a smart way to do it but it will face the aforementioned problem when the width of the viewport is just too wide.
    • The navbar hover effect is a bit unaesthetic for me as the padding-bottom is larger than the padding-top. If u are trying to give more spacing between li tags, I would suggest u use margin-bottom instead of padding-bottom.
    • Your side nav li tags missed some hover effect.
    • All the SVGs, which are used without handling its viewbox, make their size different and hard to align.

    But overall it is so good, especially that clean js, love it. Well done. OuOb

    Marked as helpful
    0
  • Vani•160
    @VANIMEHTASubmitted over 2 years ago

    I have used jquery in this project and my site was working perfectly fine before deploying it. ie all the dropdown menu and active states were working. But none of this feature is working after deploying Can someone pls help with this!

    Intro section with dropdown navigation

    3
    NotBenjamin•70
    @AeteungPosted over 2 years ago

    Try to use a closing tag instead of a self-closing tag for the script tag

    0