Search code examples
htmlcsscontainersnavbarbackground-color

Extending Navbar BG color outside of container

My navbar is within a container, and I was hoping I could extend the background yellow to the edge of the screen, but keep the Page Names within the container? I've included a Codepen -

https://codepen.io/blairhunter/pen/XWNRMgb

html,body {
  background-color: #ededed;
  margin: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-top:4px;
  padding-bottom:4px;
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
  background-color: yellow;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: 5px;
}

li a:hover:not(.active) {
  background-color: white;
}

.active {
  background-color: white;
}

.container-main {
  display: grid;
  padding-top:50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}

.container-main > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}

.container-nav {
  display: grid;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}
<body>

<div class="container-nav">
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

  <div class="container-main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

</body>

Solution

  • I propose a solution using pseudo-classes :before and :after for class .container-nav. Do the following:

    Add position: relative; to .container-nav.

    And add these pseudo-classes with absolute positioning to your css.

    html,
body {
    background-color: #ededed;
    margin: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: yellow;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 5px;
}

li a:hover:not(.active) {
    background-color: white;
}

.active {
    background-color: white;
}

.container-main {
    display: grid;
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
}

.container-main > div {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    text-align: center;
    font-size: 30px;
}

.container-nav {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
    position: relative; /*add this it*/
}

/*add this it************/

.container-nav:before {
    content: "";
    position: absolute;
    left: -100%;
    bottom: 0;
    top: 0;
    right: 100%;
    background-color: yellow;
}

.container-nav:after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    top: 0;
    right: -100%;
    background-color: yellow;
}
    <body>
    <div class="container-nav">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <div class="container-main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>