My question is how do you remove the bullet points that randomly appear and straighten the text in the navigation bar I made. I have searched all over the internet but have found none. Here is the code (consists of html, css and javascript):
//Javascript for all the pages function myFunction() { var x = document.getElementById("NavBar"); if (x.className === "navbar") { x.className += "responsive"; } else { x.className = "navbar"; } }/* Css Code for all the pages*/ .center { display: block; margin-left: auto; margin-right: auto; width: 50%; height: 200px; } .navbar { background-color: yellowgreen; overflow: hidden; } .navbar a { float: left; display: block; color: aquamarine; text-align: center; padding: 16px 14px; text-decoration: none; font-size: 20px; } .navbar a:hover { background-color: white; color: orange; } .navbar a:active { background-color: burlywood; color: cornflowerblue; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } }<! -- Index/Home Page of the website --> <!DOCTYPE html> <html lang="en"> <head> <title> Download the OS </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Os Download.css"> <script src="Os Download.js"></script> </head> <body> <nav class="navbar" id="NavBar"> <div class="menu"></div> <li><a href="Os Download.html">Home</a></li> <li><a href="About the OS.html">About the OS</a></li> <li> <a href="Download the OS.html"></a> </li> <a href="javascript:void(0);" class="icon" onclick="myFunction()"></a> </nav> <br> <br> <br> <br> <img src="Impossible os.png" class="center"> </body> </html> <! -- Os Download page (sorry for not adding text) --> !DOCTYPE html> <html> <head> <title> Impossible OS </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Os Download.css"> <script src="Os Download.js"></script> </head> <body> <nav class="navbar" id="NavBar"> <div class="menu"></div> <li><a href="Os Download.html">Home</a></li> <li><a href="About the OS.html">About the OS</a></li> <li><a href="Download the OS.html">Download the OS</a></li> <a href="javascript:void(0);" class="icon" onclick="myFunction()"></a> </nav> <br> <br> <br> <br> <img src="Impossible os.png" class="center"> </body> </html> <! -- About the Os Page --> <!DOCTYPE html> <html lang="en"> <head> <title> About the OS </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Os Download.css"> <script src="Os Download.js"></script> </head> <nav class="navbar" id="NavBar"> <div class="menu"></div> <li><a href="Os Download.html">Home</a></li> <li><a href="About the OS.html">About the OS</a></li> <li><a href="Download the OS.html">Download</a></li> <a href="javascript:void(0);" class="icon" onclick="myFunction()"></a> <br> <br> <br> <br> This is the Impossible OS. An Os which is impossible to make </html>I have looked at another question which is almost similiar to this question but i have tried their answers and found no luck.
>Solution :
Add this to the top of your css
li {list-style-type: none;}
the<li></li>elements are list items that bring those dots by default, so you just need to take’em out.