How to dynamically change css content for navbar links

user_8775262 0
Viewed 488

Right Now this is my homepage:

Homepage

I used css content to show the link texts when the user hovers over the icons. However, right now whichever icon you hover over, it will show the same text "home". My question is how can I set different text outputs for each icon/link . Thank you in advance.

Navbar.html:

<nav class="navbar">
    <ul class="navbar-nav">
        <li class="logo">
            <img src="{% static 'portfolio/logo.png' %}" alt="">   
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-home "></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-cog"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-book"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i class="fas fa-tasks"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">
                <i  class="fas fa-phone"></i>
            </a>
        </li>
    </ul>
</nav>

_sidebar.scss:

.navbar{
    position:fixed;
    background-color: $navbg;
}

.navbar-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display:flex;
    flex-direction: column;
    align-items:center;
    height: 100%;
}

.nav-item{
    width:100%;
    &:last-child {
        margin-top: auto;
    }
}

.nav-link{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    font-size: 2rem;
    padding:1.5rem;
    text-decoration: none;

    i{
        font-size: 3rem;
        color: $navicon;    
        &:hover{
            color:$icon-hover;
        }    
    }

    &:hover::after{
        content : "Home";
        position: absolute;
        color:#12181b;
        background: #b2becd;
        right:-7rem;
        border-radius: 0.5rem;
        padding:0.5rem;            
        margin-left:2rem;
    }
}

.logo{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    width: 100%;
    img{
        width:60%;
    }    
}
sass css html
2 Answers

You can use data attribute in html and call it from css for diffrent content values

  // HTML

    <li class="nav-item">
          <a href="" class="nav-link" data-title="home">
            <i class="fas fa-home"></i>
          </a>
     </li>
     <li class="nav-item">
          <a href="" class="nav-link" data-title="setting">
            <i class="fas fa-cog"></i>
          </a>
     </li>
     ...

// CSS

.nav-link:hover::after {
  content: attr(data-title); // added
  position: absolute;
  color: #12181b;
  background: #b2becd;
  right: -7rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-left: 2rem;
}
user_118660370

Using content isn't the correct way to add dynamic contents, that to to a compiled SCSS. You need to add another element, keep it hidden normally and show it when user hovers over it's parent.

This way you can add proper content for each icon whether statically or dynamically, following is a proof of concept:

.navbar {
  position: fixed;
  background-color: black;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.nav-item {
  width: 100%;
}

.nav-item:last-child {
  margin-top: auto;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  font-size: 2rem;
  padding: 1.5rem;
  text-decoration: none;
}

.nav-link i {
  font-size: 3rem;
  color: white;
}

.nav-link i:hover {
  color: red;
}

.label {
  display: none;
}

.nav-item:hover .label {
  display: block;
  position: absolute;
  color: #12181b;
  background: #b2becd;
  right: -7rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-left: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  width: 100%;
}

.logo img {
  width: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar">
  <ul class="navbar-nav">
    <li class="logo"><img src="{% static 'portfolio/logo.png' %}" alt="">

    </li>
    <li class="nav-item">
      <a href="" class="nav-link"><i class="fas fa-home "></i><span class="label">First Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i class="fas fa-cog"></i><span class="label">Second Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i class="fas fa-book"></i><span class="label">Third Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i class="fas fa-tasks"></i><span class="label">fourth Icon</span></a></li>
    <li class="nav-item"><a href="" class="nav-link"><i  class="fas fa-phone"></i><span class="label">Fifth Icon</span></a></li>
  </ul>
</nav>

user_29418990
Related