Im having issues with html css couse part 3

HTML/CSS
1

i follow along and some of the codes are not coming out the same way he put it in his videos idk if thats a error on vs code or google chrome. i literally did the exact same thing he did and it came out differently

part 3 lesson 28 navigation bar

<use xlink:href="images/sprite.svg#menu"></use>
  • Hosting
  • VPS
  • Domain
  • Pricing

this the css code for it

/* Navigation Bar */

.nav {

background: #000;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.nav__list {

width: 100%;

}

.nav__item {

padding: 0 2rem;

border-bottom: 1px solid #222;

}

.nav__item > a {

color: #d2d0db;

}

1 Like
2

Hi @chrisalexis1 do you mind pasting here the complete code from your html file?

3

Because the code you are posting here is related to the svg markup… I imagine that you are referring to a problem I came across…
If your comment that your code “came out differently” refers to the icons, I want to say that when I was creating the icons with the SVG Generator Website, I realized the icons were coming out differently (like the hashtag in the HTML file said, for example, #wordpress but the icon was another completely different than the one tagged).

When adding all the icons to the generator website, the list I received was not naming the icon properly. So, to solve the problem, I deleted the file created before and started a new one by adding one by one to the website generator. Each time I added an icon, I copied the code generated to the first sprite.svg file generated. Then, all the icons were the ones for their hashtags and the problem was fixed.

If that was not clear, what I did after realizing the icons were not the proper ones:

  1. Deleted the file I generated in the SVG Sprite Generator.
  2. Added one first icon.
  3. Saved the file as “sprite.svg”
  4. Added the second icon to the SVG Sprite Generator. Copied the code generated.
  5. Posted in the sprite.svg file and repeated these two last steps until I finished with all the icons. Then, the file was fixed…

I hope this helps!
:smiley: