Change menu icon when hovering over its container

user_19724749 0
Viewed 19

I am trying to build a nav bar. So here is the thing. What I want to do is to change both the color of menu icon and the word "menu" when hovering over their container. I use background color to build this icon, so I cannot simply change background color to change the icon. Otherwise, the background of the whole container would be blue.

.nav-item{
  display: inline-block;
  vertical-align: middle;
  height: 60px;
  margin: 5px;
}

#primary-logo{
    height: 50px;
}

.navbar{
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

.nav-list{
    list-style-type: none;
    padding-left: 0px;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    gap: 24px;
}

.menu-line{
    width: 34px;
    height:5px;
    background-color: black;
    margin: 6px 0px;
}
.menu-item{
    display: inline-block;
    vertical-align: middle;
}
.menu-sec:hover{
    color: rgb(39, 42, 202);
    cursor: pointer;
}
.menu-line:hover{
    width: 34px;
    height:5px;
    background-color: rgb(39, 42, 202);
    margin: 6px 0px;
}
<nav>
<div class="nav-item">
  <img
    id="primary-logo"
    src="800px-The_Economist_Logo.svg.png"
    alt="Economist Logo"
  />
</div>
<div class="navbar nav-item">
  <ul class="nav-list">
    <li class="menu-sec">
      <div class="menu-item"> <!-- menu icon -->
        <div class="menu-line"></div>
        <div class="menu-line"></div>
        <div class="menu-line"></div>
      </div>
      <div class="menu-item">Menu</div>
    </li>
    <li>Weekly edition</li>
    <li>Search</li>
  </ul>
</div>
</nav>

css html
1 Answers

You can do it as below. I added this line .menu-sec:hover .menu-line {background-color: rgb(39, 42, 202)}. I also removed some duplicated lines.

.nav-item {
  display: inline-block;
  vertical-align: middle;
  height: 60px;
  margin: 5px;
}

#primary-logo {
  height: 50px;
}

.navbar {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

.nav-list {
  list-style-type: none;
  padding-left: 0px;
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  gap: 24px;
}

.menu-line {
  width: 34px;
  height: 5px;
  background-color: black;
  margin: 6px 0px;
}
.menu-item {
  display: inline-block;
  vertical-align: middle;
}
.menu-sec:hover {
  color: rgb(39, 42, 202);
  cursor: pointer;
}
.menu-sec:hover .menu-line {
  background-color: rgb(39, 42, 202);
}
<nav>
  <div class="nav-item">
    <img id="primary-logo" src="800px-The_Economist_Logo.svg.png" alt="Economist Logo" />
  </div>
  <div class="navbar nav-item">
    <ul class="nav-list">
      <li class="menu-sec">
        <div class="menu-item">
          <!-- menu icon -->
          <div class="menu-line"></div>
          <div class="menu-line"></div>
          <div class="menu-line"></div>
        </div>
        <div class="menu-item">Menu</div>
      </li>
      <li>Weekly edition</li>
      <li>Search</li>
    </ul>
  </div>
</nav>

user_152886410
Related