CODEWITHSUNDEEP
htmlcss
Oliver Denny
Oliver Denny

Reputation: 25

CSS - style not coming through for HTML aside element

I'm currently trying to write the css for a sliding side menu, as part of a personal project. Right now, my problem is that the styling for the text menu items in the sidebar (see the aside element below, with class = "nav-sidebar") is not coming through from the css sheet. Below is the HTML...

And the CSS (the styling which isn't coming through is at the bottom):

* {
  margin: 0px;
  padding: 0px;
}

header {
  position: sticky;
  background: #404040;
  height: 85px;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

header::before {
  content: '';
  display: block;
  margin: 0px;
  height: 5px;
  background-color: #8EFA00;
}

.nav-main {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
}

.btn-toggle-nav {
  width: 60px;
  height: 100%;
  margin-top: 10px;
  margin-left: 10px;
  background-color: #8EFA00;
  border-radius: 50%;
  background-image: url(imgs/menu.png);
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  cursor: pointer;
}

.btn-toggle-nav:hover {
  opacity: 0.5;
}

.nav-main ul {
  text-align: center;
  padding-top: 0px;
  padding-left: 500px;
  display: flex;
  flex-wrap: wrap;
}

.nav-main ul li {
  list-style: none;
  line-height: 60px;
}

.nav-main ul li a {
  display: block;
  height: 100%;
  padding: 0 10px;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  font-family: arial;
  font-size: 16px;
}

.nav-sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 50px;
  padding: 0 5px;
  height: calc(100vh - 60px);
  background-color: #1b1b1b;
  z-index: 1000;
}

.nav-sidebar aside ul {
  padding-top: 15px;
  text-decoration: none;
}

.nav-sidebar aside ul li {
  line-height: 60px;
  list-style: none;
  text-decoration: none;
}

.nav-sidebar aside ul li span .nav-sidebar aside ul li a {
  display: block;
  height: 60px;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-family: arial;
  font-size: 16px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Posidiff</title>
  <link rel="shortcut icon" type="image/png" href="imgs/favicon.png">
  <link rel="stylesheet" href="style.css">
</head>
<header>
  <nav class="nav-main">
    <div class="btn-toggle-nav"></div>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="features.html">Features</a></li>
      <li><a href="contactus.html">Contact us</a></li>
    </ul>

  </nav>

  <aside class="nav-sidebar">
    <ul>
      <li><span>Home</span></li>
      <li><a href=#>About</a></li>
      <li><a href=#>Features</a></li>
      <li><a href=#>Contact us</a></li>
    </ul>
  </aside>
</header>

<body>
</body>

</html>

I've included the entirety of both the HTML and CSS documents for the sake of providing some context, but right now I'm only interested in the styling for the items in the ul/li within the "nav-sidebar" class.

I've tried checking it in a different browser (safari - although i'm using it in chrome), and tweaking one or two things in the css doc, but to no avail.

I also wanted to mention that I'm fairly new to HTML and CSS, so it's entirely possible that there are a few other things wrong here as well!

So - ultimately my question is, why is the styling here not coming through for ".nav-sidebar aside ul li span .nav-sidebar aside ul li a"?

Many thanks in advance!

Upvotes: 1

Views: 673

Answers (2)

Leon
Leon

Reputation: 1881

You are missing a comma between “span” and “aside”. Should be

aside.nav-sidebar ul li span, aside.nav-sidebar ul li a

Upvotes: 0

Plague3D
Plague3D

Reputation: 40

the order you were calling your element, class in was wrong. try notation like this.

<element>.class <child element>
/* or */
<element>#id <child element>

aside.nav-sidebar
aside.nav-sidebar ul
aside.nav-sidebar ul li
aside.nav-sidebar ul li a

Upvotes: 1

Related Questions