Skip to content
Submitted almost 3 years ago

Intro section with dropdown nav

MURRAY122•280
@MURRAY122
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • svg, I needed to darken the dropdown arrow and end up using 'fill'. It filled the icon completely instead of just the arrows line. Is there another approach that could achieve this? Is it also best to use svg tags within the HTML file itself or as 'background-image' in CSS?
  • Is it best practise to add media queries (CSS) after each class or handle all media queries at the end of a CSS file.
  • The nav I handled by using JS to swap out CSS classes (top nav to side nav). The HTML wasn't changed, its structure contained within one HTML element. Is it better to separate the side and top nav structures into their own html tags?
  • The picture HTML tag am still new to. Seems difficult contain the image size for responsiveness without stretching the image out or being too small.

Any feedback on this or anything else would be great. Thanks for viewing

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Aditya Chakraborty•100
    @aditya-chakraborty

    Hi @murray122,

    Your CSS code looks pretty neat. But it is usually considered best practices to handle the responsiveness and put all the media queries at the end of the CSS file.

    Also, instead of using a different svg for each open and closed dropdown menu, you can consider using transform: rotate(180deg) to rotate it by 180 degrees.

    Good job!

  • Alejandro25A•220
    @Alejandro25AR

    Hi @murray122,

    • The svg is filled with black on the outside, since you must apply the property to the stroke instead of fill.
    • It is better to embed the svg directly in the html than to place it as an image, since being in svg it can be resized without losing quality and its properties can be modified with css.
    • I advise you not to change the font-weing property when hovering the menu, as this increases the size of the box, causing a slight displacement of the other elements, which is not very pleasant visually.

    Good work, keep it up

  • Riccardo•240
    @riccardofano

    Hello Murray, good job on the challenge!

    Regarding your question about svgs: I personally use <img src="picture.svg" /> whenever I don't need to modify their color but I want them to take up space in the document so I can position them as you would with any other element in the dom. background-image is used when I don't want it to occupy physical space, it just needs to be in the background.

    You can look at this blue Slack banner under the comments for reference, the first line is an img tag, while the dark blue logo in the bottom right corner is in a background-image. One takes up physical space, the other does not.

    An inline svg is for when you want to take up space and modify its properties with CSS, like your dropdown arrow. Depending on how the svg was made you'll want to modify either the fill or the stroke, you can look at the actual file to know for sure.

    <svg class="icon" width="10" height="6" xmlns="http://www.w3.org/2000/svg">
    <path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"></path>
</svg>

    As you can see the stroke is a color while the fill is none so in this case you'll want to modify the stroke.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord