NavBar Auto Toggling On - CSS

UsamaKhan
February 2, 2023
242 views
0 votes
2 Answers

I am using the onclick method for turning my navbar on/off the problem that I’m having is when I adjust my screen size to mobile view my nav auto turns on.

I’m not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:

function closeNav() {
  document.getElementById("nav_bar").style.height = "0%";
  document.getElementById("open-btn").style.display = "inline-block";
  document.getElementById("close-btn").style.display = "none";
}

function openNav() {
  document.getElementById("nav_bar").style.height = "100%";
  document.getElementById("open-btn").style.display = "none";
  document.getElementById("close-btn").style.display = "inline-block";
}

  body {
  background: url(images/bg-img-01.jpg) no-repeat;
  background-size: cover;
}

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

#nav_bar {
  background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
  position: fixed;
  top: 0;
  width: 100%;
}

#nav_bar>img {
  display: none;
}

.nav {
  background: none;
  overflow: hidden;
  display: flex;
  margin-inline: auto;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  width: 65%;
  left: 20%;
  padding: 1.4em;
}

.list-item {
  text-decoration: none;
  color: #CBD5DF;
  font-weight: bolder;
}

.list-item {
  position: relative;
}

.list-item::before {
  position: absolute;
  content: "";
  background-color: #535792;
  height: 4px;
  width: 0%;
  top: 25px;
  transition: all .3s ease-in;
}

.list-item:hover::before {
  width: 100%;
}

.list-item:hover {
  color: #C4C7C8;
}

#close-btn,
#open-btn {
  display: none;
}

@media only screen and (max-width:768px) {
  #nav_bar>img {
    display: block;
    position: absolute;
    width: 10em;
    left: 20%;
    top: 10%;
  }
  #nav_bar {
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow: hidden;
    transition: 0.5s;
  }
  .nav {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    top: 20%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .list-item {
    text-decoration: none;
    display: block;
    color: #ffdada;
    font-size: 1.5rem;
    transition: 0.3s;
  }
  #close-btn,
  #open-btn {
    display: block;
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: 2rem;
    color: #818181;
    transition: all 0.3s;
  }
  #close-btn:hover {
    color: #fff;
  }

<body>
  <div id="nav_bar">
    <a href="#" id="close-btn">
      <i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
    </a>
    <img src="assests/images/moon.png" alt="" />

    <div class="nav">
      <a class="list-item" href="#">Home</a>
      <a class="list-item" href="#">About Me</a>
      <a class="list-item" href="#">Projects</a>
      <a class="list-item" href="#">C.V</a>
      <a class="list-item" href="#">Contact</a>
    </div>
  </div>
  <a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
    ></a>
  <script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answers

I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.

You can do this in several ways, but here is an example of a simple way to do it:

// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");

// Create a variable to hold the state of your nav
let navIsOpen = false;

// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
  // Update the nav state variable
  navIsOpen = !navIsOpen;
  // run a function that will update the nav "styles"
  updateNav();
})

// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
  navIsOpen
    ?
    nav.classList.add('nav--is-open') :
    nav.classList.remove('nav--is-open');
}

.nav {
  margin-top: 1rem;
  padding: 1rem;
  background-color: lightgrey;
}

.nav--is-open {
  background-color: purple;
  color: white;
}

<button class="nav-toggle">Toggle nav</button>

<nav class="nav">
  Your nav here
</nav>

Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:

const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');

BUTTON.addEventListener('click', function() {
  NAV.classList.toggle('d-none');
});

  body {
  background: url(images/bg-img-01.jpg) no-repeat;
  background-size: cover;
}

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

nav {
  background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
  position: sticky;
  top: 0;
  width: 100%;
}

menu {
  background: none;
  overflow: hidden;
  display: flex;
  margin-inline: auto;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  width: 65%;
  left: 20%;
  padding: 1.4em;
}

nav li a {
  text-decoration: none;
  color: #CBD5DF;
  font-weight: bolder;
  position: relative;
}

nav li a::before {
  position: absolute;
  content: "";
  background-color: #535792;
  height: 4px;
  width: 0%;
  top: 25px;
  transition: all .3s ease-in;
}

nav li a:hover::before {
  width: 100%;
}

nav li a:hover {
  color: #C4C7C8;
}

.d-none {
  display: none;
}

<nav>
  <img src="assests/images/moon.png" alt="" />

  <menu>
    <li><a class="list-item" href="#">Home</a></li>
    <li><a class="list-item" href="#">About Me</a></li>
    <li><a class="list-item" href="#">Projects</a></li>
    <li><a class="list-item" href="#">C.V</a></li>
    <li><a class="list-item" href="#">Contact</a></li>
  </menu>
</nav>

<button id="toggle_navBar">Toggle NavBar</button>

A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!

Please signup or login to give your own answer.

Click here to cancel reply.

NavBar Auto Toggling On – CSS

Answers