0

.navbar {
    background-color: 595959;
    color: #ffffff;
    list-style: none;
}
<ul class = "navbar"> 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>

No matter what I do in my CSS stylesheet to style the navbar nothing changes. In the code above I tried to remove the bullets with the list-style however nothing changes as shown in the photo. It seems no css commands are making any difference on the unordered list.

enter image description here

Stephen P
  • 14,422
  • 2
  • 43
  • 67
Sean Kelly
  • 15
  • 3
  • of course the code i have included is not together on a html file. i have imported my stylesheet and the css code is in the stylesheet which is definitely imported into the index.html file correctly. – Sean Kelly Nov 30 '18 at 01:00
  • You can start with `ul.navbar li { display: inline-block; }` – Stephen P Nov 30 '18 at 01:04
  • or maybe your stylesheet link is incorrect or has the wrong path, maybe absolute v. relative, but you're not showing that. `` – Stephen P Nov 30 '18 at 01:11

4 Answers4

2

Here we go please dot his like this to archive style for removing the bullets use list-style-type:none; and of you do not want to use flex property you can simply use .navbar > li{display:inline-block;}

.navbar {
    background-color: 595959;
    color: #ffffff;
    list-style: none;
    display:block;
}

.navbar{display:flex; list-style-type:none;}
.navbar li{display:block; padding:15px;   border:1px solid #000;  color:#fff; }
.navbar li a{width:100%; text-align:center; color:#000;  text-decoration:none; }
.navbar2P{list-style-type:none;}
.navbar2 li{display:inline-block; }
.navbar2 li a{display:block; border:1px solid #000; color:#000; padding:15px 5px; text-decoration:none; }
<ul class = "navbar" > 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>

<ul class = "navbar2" > 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>
Sumit Kumar
  • 493
  • 2
  • 5
  • 16
1

Taken from this post:

You can remove bullets by setting the list-style-type to none on the CSS for parent element (typically a ), for example:

ul {
  list-style-type: none;
}

You might also want to add padding: 0 and margin: 0 to that, if you want to remove indentation as well.

See Listutorial for a great walkthrough of list formatting techniques.

Hope this helps!

Community
  • 1
  • 1
Scripter17
  • 38
  • 1
  • 7
0

Just add another CSS class:

ul {
  list-style: none;
{
Joey Breithaupt
  • 85
  • 5
0

You should have the result you need if you add:

display: block;
position: relative;

If it doesn't help - please make some sandbox in jsfiddle or alike resource and give a link, let's see what's wrong.

If you need to style li and a elements, you need to write as well, for example:

.navbar li{
list-style: none;
padding: 1vw 2%;
}
.navbar li a{
text-decoration: none;
}
Eugene Kapustin
  • 156
  • 8