working on it

Nice work @ananyakaligal ! That might be a little too dark; a style like this should work nicely:

Here's some rough CSS; will need some organizing. Also note the shade of blue is the same as the shade of blue used for the text/bottom border. We'll just need to brighten it/make it semi-transparent. We can use the less colour functions for this 👍

ul.nav-bar {
  border-bottom: 1px solid #ccc;
  margin-left: -20px !important;
  margin-right: -20px !important;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
}

.nav-bar li a {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
}


.nav-bar li:not(.selected) a {
  font-weight: normal;
}

.nav-bar li:not(.selected):hover a {
  color: #02598b;
  border-bottom: none;
}

.nav-bar li a:after {
  content: "";
  left: 4px;
  right: 4px;
  top: 0;
  bottom: 2px;
  background: #2296d9;
  position: absolute;
  z-index: -1;
  border-radius: 4px;
  opacity: 0.18;
  animation: smallscale 0.2s;
  pointer-event: none;
  display: none;
}

.nav-bar li:not(.selected):hover a:after {
  display: block;
}

.nav-bar li.selected a:after {
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
}

@keyframes smallscale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@cdrini This looks good. However, I feel that highlighting the selection wouldn’t differentiate it much from the hovering. Instead, having just an underline for the selection while highlighting the hovering makes it more readable. What do you think?

I think having the selected item highlighted is useful, since just the border is a bit subtle. But I think we could make the hover effect more transparent (above they are the exact same transparency); that'll help differentiate it nicely!

Also note there are a few more things differentiating in the above snippet: the border radius/size of the hover rectangle, and I also changed the selected tab to be the only tab that is bold. That should add more pieces of visual contrast!

@cdrini I made the changes you suggested and added a few small tweaks. I added tiny borders on the top, left, and right to give the selected state a subtle boxed effect without making it too noticeable. I also made sure that the hover effect doesn’t override the selected style when hovering over it. Let me know if any changes are required

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 17.27%. Comparing base (606faaf) to head (b5cdba1).
Report is 463 commits behind head on master.

@@            Coverage Diff             @@
##           master   #10495      +/-   ##
==========================================
- Coverage   17.31%   17.27%   -0.04%     
==========================================
  Files          87       87              
  Lines        4835     4845      +10     
  Branches      856      860       +4     
==========================================
  Hits          837      837              
- Misses       3471     3477       +6     
- Partials      527      531       +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Awesome thank you @ananyakaligal ! The style there is a bit too different from the style of the rest of the site; let's see if we can use the style I outlined in the CSS snippet above.