Setting a part of an element to a different color in css

April 28, 2023

I’m trying to make this drop down menu where the button displayed space under the button is the same color. Though it’s abit hard to describe in words this is what im trying to achieve. Though it works this is mostly for the design aspect of it.

<head>
    <title>Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap');
      html,body{
          padding: 0;
          margin: 0;
          background: #121212;
          height: 100%;
      }
      .main{
          height: 100%;
          width: 60%;
          margin:auto;
          background: #121212;
      }
      a,p,h1{
          font-family: 'Libre Franklin', sans-serif;
          color: white;
      }
      header{
          background: #181818;
          width: 100%;
          height: 75px;  
      }
      .headerMain{
          width: 60%;
          height: 100%;
          margin: auto;
          font-size: 40px;
          background-image: url(assets/Logo.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: right;
      }
      .headerMain a {
        color: white;
        text-decoration: none;
        font-size: 35px;
        display: block;
      }

      .headerMain a.icon {
          background: #121212;
          width: 60px;
          height: 55px;
          text-align: center;
          vertical-align: middle;
          padding-top: 20px;
          }

      .headerMain a:hover,i:hover{
        background-color: #282828;

      }

      nav{
          display:none;
          height: 50px;
          margin: 0;    
      }

      nav ul{
          background-color: #181818;
          list-style:none;
          margin:0;
          padding:10px;
          text-align:center;
      }
      nav li{
          display:inline;
      }
      nav a{
          font-weight: 900;
          padding: 10px;
          margin: 0 5px;
      }
      nav a:hover{
          background-color: white;
          color: black
      }
    </style>
</head>
<body>
    <header>
        <div class="headerMain">
            <a class="icon" onclick="dropDownFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </header>
    <nav id="dropDown" >
        <ul>
            <li><a>Home</a></li>
            <li><a>Shop</a></li>
            <li><a>Gallery</a></li>
            <li><a>Contact</a></li>
        </ul>

    </nav>
    <div class="main">
        <h1>Hello World</h1>
    </div>
    <script>
      function dropDownFunction() {
          var x = document.getElementById("dropDown");
          if (x.style.display === "block") {
            x.style.display = "none";
          } else {
            x.style.display = "block";
          }
        }
    </script>
</body>

Desired Effect:

>Solution :

You could use an :after element that sits below the icon element.

Set the background-color to match the above icon.

I’ve added some more padding-left to the nav ul so that the first item does not overlap the new vertical bar

.toToggle:after {
    content: '';
    background-color: #121212;
    width: 60px;
    display: inline-block;
    height: 60px;
}

<head>
    <title>Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin&display=swap');
      html,body{
          padding: 0;
          margin: 0;
          background: #121212;
          height: 100%;
      }
      .main{
          height: 100%;
          width: 60%;
          margin:auto;
          background: #121212;
      }
      a,p,h1{
          font-family: 'Libre Franklin', sans-serif;
          color: white;
      }
      header{
          background: #181818;
          width: 100%;
          height: 75px;  
      }
      .headerMain{
          width: 60%;
          height: 100%;
          margin: auto;
          font-size: 40px;
          background-image: url(assets/Logo.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: right;
      }
      .headerMain a {
        color: white;
        text-decoration: none;
        font-size: 35px;
        display: block;
      }

      .headerMain a.icon {
          background: #121212;
          width: 60px;
          height: 55px;
          text-align: center;
          vertical-align: middle;
          padding-top: 20px;
          }

      .headerMain a:hover,i:hover{
        background-color: #282828;

      }

      nav{
          display:none;
          height: 50px;
          margin: 0;    
      }

      nav ul{
          background-color: #181818;
          list-style:none;
          margin:0;
          padding: 10px 0 10px 30px;
          text-align:center;
      }
      nav li{
          display:inline;
      }
      nav a{
          font-weight: 900;
          padding: 10px;
          margin: 0 5px;
      }
      nav a:hover{
          background-color: white;
          color: black
      }
    </style>
</head>
<body>
    <header>
        <div class="headerMain">
            <a class="icon toToggle" onclick="dropDownFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </header>
    <nav id="dropDown" >
        <ul>
            <li><a>Home</a></li>
            <li><a>Shop</a></li>
            <li><a>Gallery</a></li>
            <li><a>Contact</a></li>
        </ul>

    </nav>
    <div class="main">
        <h1>Hello World</h1>
    </div>
    <script>
      function dropDownFunction() {
          var x = document.getElementById("dropDown");
          if (x.style.display === "block") {
            x.style.display = "none";
          } else {
            x.style.display = "block";
          }
        }
    </script>
</body>