Home Β» CSS Β» CSS: Beautiful Horizontal Navigation Bar with Emojis

CSS: Beautiful Horizontal Navigation Bar with Emojis

Previously, I shared a simple horizontal navigation bar using the CSS and explained well how to create it. In this tutorial, I am just giving an example of another but beautiful horizontal navigation bar example using the CSS. This navigation bar having the pretty emojis πŸ’–with each menu option which increases the look and feel of the menu bar.

HTML Code for Horizontal Navigation Bar

In the below clean HTML code, replace the # with your links. Also, change the menu options name and emojis according to your needs.

<nav class="foxnav">
  <ul class="foxnav-items">
    <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">πŸ™‹β€ Get Started</a></li>
    <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">πŸ“– Docs</a></li>
    <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">πŸ“° Blog</a></li>
    <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">πŸ‘¨β€πŸ’» Community</a></li>
    <div class="separator"></div>
    <li class="foxnav-item"><a class="item-link" onclick="select(this)" href="#">πŸ’– Contribute</a></li>
    <div class="foxnav-indicator"></div>
  </ul>
</nav>

CSS Code

.foxnav {
  max-width: 100%;
  padding: 0 2em;
  background-color: #FFF;
  border-radius: 0.3rem;
  box-shadow: 0 2px 2px #CCC;
  line-height: 4em;
  font-weight: bold;
  white-space: nowrap;
  overflow: auto;
}

.foxnav-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-grid;
  grid-auto-flow: column;
  grid-gap: 1em;
}
.foxnav-items > *:nth-child(1) {
  grid-column: 1 / 2;
}
.foxnav-items > *:nth-child(2) {
  grid-column: 2 / 3;
}
.foxnav-items > *:nth-child(3) {
  grid-column: 3 / 4;
}
.foxnav-items > *:nth-child(4) {
  grid-column: 4 / 5;
}
.foxnav-items > *:nth-child(5) {
  grid-column: 5 / 6;
}
.foxnav-items > *:nth-child(6) {
  grid-column: 6 / 7;
}

.foxnav-item {
  padding: 0 0.75em;
  display: inline;
  grid-row: 1/1;
}
.foxnav-item.active .item-link {
  color: #2DA;
}

.item-link {
  color: #456;
  text-decoration: none;
  transition: color 256ms;
}
.item-link:hover {
  color: #297;
  text-decoration: undelrine;
}

.separator {
  width: 1px;
  height: 60%;
  margin: 10% 0;
  background-color: #CCC;
  align-self: center;
}

.foxnav-indicator {
  --index: 1;
  height: 3px;
  background-color: #2DA;
  border-radius: 3px 3px 0 0;
  grid-column: var(--index)/calc(var(--index) + 1) !important;
  grid-row: 1/1;
  align-self: end;
}

body {
  min-height: 100vh;
  background: #EEE;
  font-family: "Roboto", sans-serif;
  display: grid;
  place-items: center;
}

*, *:before, *:after {
  box-sizing: border-box;
}

JavaScript Code

function select (link) {
  const item = link.parentNode
  const nav = item.parentNode
  const index = Array.prototype.indexOf.call(nav.children, item)
  const items = nav.querySelectorAll('.foxnav-item')
  const indicator = nav.querySelector('.foxnav-indicator')
  
  indicator.style.setProperty('--index', index + 1)
  items.forEach(item => item.classList.remove('active'))
  item.classList.add('active')
}
const items = document.querySelectorAll('.item-link')
const randomItem = items[Math.round(Math.random() * (items.length - 1))]

select(randomItem)

Output

Beautiful horizontal navigation bar using CSS with emojis.

 

Related Tutorials: