CODEWITHSUNDEEP
javascriptcss
user11206142
user11206142

Reputation:

Navigation bar: Tab icons disapear when I click on them

I am working on this navigation bar. I got the navigation bar to change to a different color whenever I click on tab, but that resulted to a problem: When I click on an icon, the bar changes colors but the tab's logo disappear. It reappears only when I click on another tab, which also disappears... in other words tabs disappear when clicked on and active. I couldn't find how that happens, I am new to this so any cue would be much appreciated if someone has time to spare.

Much thanks

HTML:

<!--Header-->
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css'>

      <link rel="stylesheet" href="css/style.css">
<!--End Header-->

</head>

<body>

<!--Header-->
<div class="tab-nav-container">

    <div class="tab active purple">
        <i class="fas fa-home"></i>
    </div>
    <div class="tab pink">
      <i class="far fa-code"></i>
    </div>
    <div class="tab teal">
        <i class="far fa-user"></i>
    </div>
    <div class="tab yellow">
        <i class="fas fa-search"></i>
    </div>
    <div class="tab yellow">
        <i class="far fa-at"></i>
    </div>

</div>

    <script  src="js/index.js"></script>
<!--End Header-->

CSS:

    box-sizing: border-box;
}

body {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: background 0.4s linear;

    text-align: center;

}

.tab-nav-container {
    background-color: #fff;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    display: flex;
    justify-content: space-between;
    padding: 30px;
    width: 500px;
}

.tab {
    background-color: transparent;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0px;
    margin: 0 0px;
    transition: tab-nav-container 0.4s linear;
}

.tab i {
    font-size: 1.2em;
}

.tab p {
    font-weight: bold;
    overflow: hidden;
    max-width: 0;
}

.tab.active p {
    margin-left: 0px;
    max-width: 300px;
    transition: max-width 0.1s linear;
}

.tab.active.purple {
    background-color: rgba(91, 55, 183, 0.2);
    color: rgba(91, 55, 183, 1);
}

.tab.active.pink {
    background-color: rgba(201, 55, 157, 0.2);
    color: rgba(201, 55, 157, 1);
}

.tab.active.yellow {
    background-color: rgba(230, 169, 25, 0.2);
    color: rgba(230, 169, 25, 1);
}

.tab.active.teal {
    background-color: rgba(28, 150, 162, 0.2);
    color: rgba(28, 150, 162, 1);
}

@media (max-width: 450px) {
    .tab-nav-container {
        padding: 20px;
        width: 350px;
    }

    .tab {
        padding: 0 10px;
        margin: 0;
    }

    .tab i {
        font-size: 1em;
    }
}

JS:

const tabs = document.querySelectorAll('.tab');

tabs.forEach(clickedTab => {
    // Add onClick event listener on each tab
    clickedTab.addEventListener('click', () => {
        // Remove the active class from all the tabs (this acts as a "hard" reset)
          tabs.forEach(tab => {
            tab.classList.remove('active');
        });

        // Add the active class on the clicked tab
        clickedTab.classList.add('active');
        const clickedTabBGColor = getComputedStyle(clickedTab).getPropertyValue('color');
        console.log(clickedTabBGColor);
        banner.style.backgroundColor = clickedTabBGColor;
    });
});

Upvotes: 0

Views: 248

Answers (2)

user11206142
user11206142

Reputation:

Thanks all. I got the cues I need it to fix it. @Randy Casburn as my experience is limited, I don't always see those little things as clearly. @pawnonfire Yes I know I was starting with the layout. @EshgheCode Thanks a lot

Upvotes: 0

EshgheCode
EshgheCode

Reputation: 312

I change some of the CSS properties and I think it's work fine with me:

enter image description here

edit: make sure FontAwesome classes are correct, I've used some other icons.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition:  0.4s linear;
  text-align: center;
}

.tab-nav-container {
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  display: flex;
  justify-content: space-between;
  padding: 30px;
  width: 500px;
}

.tab {
  background-color: transparent;
  border-radius: 50px;
  cursor: pointer;
  display: flex;  
  transition: tab-nav-container 0.4s linear;
}

.tab i {
  font-size: 2.2em;
}

.tab p {
  font-weight: bold;
}

.tab.active p {
  transition: max-width 0.1s linear;
}

.tab.active.purple {
  background-color: rgba(91, 55, 183, 0.2);
  color: rgba(91, 55, 183, 1);
}

.tab.active.pink {
  background-color: rgba(201, 55, 157, 0.2);
  color: rgba(201, 55, 157, 1);
}

.tab.active.yellow {
  background-color: rgba(230, 169, 25, 0.2);
  color: rgba(230, 169, 25, 1);
}

.tab.active.teal {
  background-color: rgba(28, 150, 162, 0.2);
  color: rgba(28, 150, 162, 1);
}

@media (max-width: 450px) {
  .tab-nav-container {
      padding: 20px;
      width: 350px;
  }

  .tab {
      padding: 0 10px;
      margin: 0;
  }

  .tab i {
      font-size: 1em;
  }
}

Upvotes: 1

Related Questions