CODEWITHSUNDEEP
cssbootstrap-4backgroundsidebar
thecode
thecode

Reputation: 87

I can not define the background of my sidebar

I have made a sidebar with HTML and CSS. I can style it how I want it except the background-color. The background stays transparent and you can see the color of the page. 

.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 7;
  top: 0;
  left: 0: background-color: blue;
  overflow: auto;
  padding-top: 350px
}
<div id="mySidenav" class="sidebar">
  <a href="#">Barber</a>
  <a href="#">Massage</a>
  <a href="#">Nails</a>
</div>

Why is this so? I have a Bootstrap CSS could this be the answer?

Upvotes: 0

Views: 47

Answers (1)

itsallgoodie
itsallgoodie

Reputation: 516

Your CSS is setting left: 0: which isn't correct syntax. You'll need to end the line with a semi-colon instead of a colon. If you change it to left: 0; your background color will work.

.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 7;
  top: 0;
  left: 0;
  background-color: blue;
  overflow: auto;
  padding-top: 350px
}
<div id="mySidenav" class="sidebar">
  <a href="#">Barber</a>
  <a href="#">Massage</a>
  <a href="#">Nails</a>
</div>

This is one of those things that we've all banged our head against a wall for too long on to realize it was just a simple typo. In this instance it would be very easy to catch with an editor with CSS highlighting. The moment I dropped your code into Codepen it was clear there was a syntax issue.

Upvotes: 4

Related Questions