Why does my mobile nav controls (close and open) turns blue after I hover and hover out of it

HTML & CSS
1

When I use inspect to try my website’s responsiveness everything is fine on mobile and tablet or iPad but there is just one problem. when I hover over the toggle close and open it turns blue when I click it is still white and I hover out of it it turns blue I have tried multiple things.

<nav>
   <ul class="menu">
      <li class="logo"><a href="https://uprightcode.com/">Upright Code</a></li>
      <li class="item"><a href="https://uprightcode.com/">Home</a></li>
      <li class="item"><a href="#About">About</a></li>
      <li class="item"><a href="#plans">Plans</a></li>
      <li class="item"><a href="https://uprightcode.com/Lessons">Lessons</a>
      </li>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
   </ul>
</nav>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}



nav {
  background-color: #000;
  padding: 0 15px;
  font-family: 'Open Sans';
  font-weight: 600;
  position: fixed;
  top: 0;
  z-index:10;
  width:100%;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
     color: rgb(233, 221, 221);
}


.logo {
  font-size: 20px;
  padding: 7.5px 10px 7.5px 0;
}
.item {
  padding: 10px;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: unset;
}
.menu li a {
  display: block;
  padding: 15px 5px;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 20px;
  color: white;
}

.toggle:hover {
     color: white;
}

.toggole:active {
     color: white;
}

.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}


/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
 
  .toggle {
    flex: 1;
    order: 2;
    color: white;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 68px;
    background: #111;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    border-radius: 0;
  }
}

Since it has to do with the mobile menu it may be my javascript submenu toggle.

/* Toggle mobile menu */
function toggleMenu() {
    if (menu.classList.contains("active")) {
        menu.classList.remove("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
    } else {
        menu.classList.add("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
    }
}



/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
    if (item.querySelector(".submenu")) {
        item.addEventListener("click", toggleItem, false);
    }
    item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);

Don’t forget your awesome font 5 guys!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
2

I pasted all this into Codepen, and I don’t even see a menu at mobile size.

3

I notice this typo

4

Shrink it smaller then click the three lines on top of each other. Or shink until you see the three bars or you did not add the javascript.

5

I fixed that thanks but it still do not work.

OFF TOPIC
[

BTW: Your pfp looks like an elephant head until you actually look closely and see it is two shoes

]

1 Like
6

I added all the HTML, the CSS and the JS.
There were no three bars, just a dot.

7

ooooooooooooooooohhhhhhhhhhhhh yah add the awesome font 5 tag in I forgot that but here you are.

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
8

I don’t see any blue. Here’s a screenshot after the hamburger has been clicked a few times and hovered.

Screen Shot 2021-06-23 at 19.27.29

9

I mean hover and unhover

10

Unless its the visited state of the anchor showing up.

e.g. Do you have something like this.

a:visited {
  color: blue;
}
11

now all the links are turning blue and I do not have it.

12

I didn’t mean add it :slight_smile:

You may just have the visited state showing so try something like this to check.

.toggle a:visited {
  color: #fff;
}
13

You have fixed the problem but my nav links are acting like that too.

14

You have enough information to solve that problem as well now :wink:

1 Like
15

Oh yah you do have thew point

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.