CODEWITHSUNDEEP
htmlcssvisual-studio-code
Abhiraj SB
Abhiraj SB

Reputation: 113

The dots from my nav-bar are not being removed

I have read through my small code and want the dots removed from my nav-bar. I have already explored other similar questions on stack over flow and tried their answer. But the outcome that I have seen is that is still not removing the dots but when I type in the code in code.io it removes it for me: https://codepen.io/abhirajsb/pen/xxVLrpW.

My HTML code in my code editor(VS-CODE):

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Multi-Vitamins</title>
 </head>
 <body>
   <header id="header">
     <img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
     <nav id="nav-bar">
         <ul>
           <li><a href="#About" class="nav-link">About</a></li>
           <li><a href="#Work" class="nav-link">How it works</a></li>
           <li><a href="#Pricing" class="nav-link">Pricing</a></li>
         </ul>
     </nav>
   </header>
 </body>
</html>

My CSS code:

li {
 list-style-type: none;
 padding: 0%;
 margin: 0%;
}

The output on my extension live is always showing the dots: enter image description here

Upvotes: 0

Views: 148

Answers (4)

Abhiraj SB
Abhiraj SB

Reputation: 113

I simply forgot to reference CSS style sheet to my HTML sheet.

solved it.

Upvotes: 0

Davor
Davor

Reputation: 26

Try This in the header replace styles.css with ur css:

<head>
 <link rel="stylesheet" href="styles.css">
</head>

Upvotes: 1

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Could you please show us your CSS code? if this is all you have. Could you please try to do a hard reset. by clicking Ctrl + shift + R in your browser and check again with our answers.

Or try to run it on your local device. I don't see ay problem with your code as it run without any problem. anyway I tried it with list-style: none; and it worked

 ul {
        list-style: none;
    }

that would solve your problem. if that doesn't work please let me know.

  ul {
        list-style: none;
    }
<header id="header">
  <img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
  <nav id="nav-bar">
    <ul>
      <li><a href="#About" class="nav-link">About</a></li>
      <li><a href="#Work" class="nav-link">How it works</a></li>
      <li><a href="#Pricing" class="nav-link">Pricing</a></li>
    </ul>
  </nav>
</header>

Upvotes: 0

Edwin Alwin
Edwin Alwin

Reputation: 217

You just try list-style: none instead of list-style-type: none; enter image description here

li {
  list-style: none;
  padding: 0%;
  margin: 0%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multi-Vitamins</title>
  </head>
  <body>
    <header id="header">
      <img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
      <nav id="nav-bar">
          <ul>
            <li><a href="#About" class="nav-link">About</a></li>
            <li><a href="#Work" class="nav-link">How it works</a></li>
            <li><a href="#Pricing" class="nav-link">Pricing</a></li>
          </ul>
      </nav>
    </header>
  </body>
</html>

Upvotes: 0

Related Questions