Html Question posted in
Some basic documentation can be found here.

Html – Background color not applying under text in navbar

I never had a problem with this but I just want the whole navbar to have the same background color but its not applying under the anchor tags and the h1.
here is what i got

Could someone explain why is this happening and how to do it correctly?

* {
  padding: 0;
  margin: 0;
  background-color: #FCF6F5;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#navbar {
  display: flex;
  justify-content: space-around;
  background-color: #2BAE66;
}

nav a {
  font-size: 24px;
}

a:hover {
  color: #0f4c2a;
  font-size: 26px;
}

#logo {
  font-size: 35px;
}
<nav id="navbar">
  <h1 id="logo">EverBike</h1>
  <div id="textnav">
    <a>About</a>
    <a>Contact</a>
    <a>Prices</a>
  </div>
</nav>
Tags:

2

Answers


  1. 0

    The reason is that you assigned background-color: #FCF6F5; to everything by using the * selector, which applies to all your elements except #navbar (which has its own definition for background), i.e. also to div, a, #textnav, h1 and #logo.

    To omit that, use that background-color for example only on body – this will fix your issue.

    All other elements have a transparent background by default, so the body background will apply to them automatically, appearing behind / "shining through" the other elements.

    * {
  padding: 0;
  margin: 0;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body {
  background-color: #FCF6F5;
}

#navbar {
  display: flex;
  justify-content: space-around;
  background-color: #2BAE66;
}

nav a {
  font-size: 24px;
  background: transparent;
}

a:hover {
  color: #0f4c2a;
  font-size: 26px;
}

#logo {
  font-size: 35px;
}
    <nav id="navbar">
  <h1 id="logo">EverBike</h1>
  <div id="textnav">
    <a>About</a>
    <a>Contact</a>
    <a>Prices</a>
  </div>
</nav>
    Login or Signup to reply.
  2. 0

    Better yet, you just have to comment the background #FCF6F5 from selector * —> You are setting for all elements the background color #FCF6F5 except the #nav which is green (sure * doesn’t touch the #nav), when commenting the background property from * selector, you will receive the desired effect.

    You can also take a look here for how to use css nesting and other cool new cool features.
    https://positivethinking.tech/insights/the-10-new-css-features-in-2023/

    You’re nav seems legit and has responsiveness(using flex, also try grid as a second variant), also for text nav add an vertical alignment with align-items: center and that’s about it..

    Check below snippet:

    * {
  padding: 0;
  margin: 0;
  // background-color: #FCF6F5; 
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#navbar {
  display: flex;
  justify-content: space-around;
  background-color: #2BAE66;
}

nav a {
  font-size: 24px;
}

a:hover {
  color: #0f4c2a;
  font-size: 26px;
}

#logo {
  font-size: 35px;
}
    <nav id="navbar">
  <h1 id="logo">EverBike</h1>
  <div id="textnav">
    <a>About</a>
    <a>Contact</a>
    <a>Prices</a>
  </div>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search