Navbar remains stuck in expanded position after screen size decreases

Question

Navbar remains stuck in expanded position after screen size decreases

I'm currently in the process of developing a football-focused website and am tackling the navigation bar. I've implemented code that allows the navbar to collapse with a hamburger button when the screen size shrinks. However, once I resize the screen back to its original width, the navbar content disappears.

Below is the snippet of my code:

const navbar = document.getElementById('navbar')
let number = 0

function toggleFunction() {

  console.log(getComputedStyle(navbar).display)
  if (number === 1) {
    navbar.style.display = 'none'
    number -= 1
  } else {
    navbar.style.display = 'inline-block'
    navbar.style.position = 'absolute'
    navbar.style.top = '75px'
    navbar.style.width = '100%'
    navbar.style.textAlign = 'center'
    navbar.style.padding = ' 5px 0'
    navbar.style.background = 'orange'
    navbar.style.height = "auto";
    number += 1
  }

  console.log(navbar)
}

.toggle-btn {
  width: 35px;
  position: absolute;
  right: 80px;
  top: 25px;
  display: none;
}

.toggle-btn span {
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  float: left;
  margin-bottom: 8px;
}

@media (max-width: 800px) {
  .toggle-btn {
    display: block;
  }
  #navbar {
    display: none;
  }
  #header {
    display: block;
  }
}

@media (min-width: 801px) {
  #navbar {
    display: inline-flex;
    width: 100%;
    justify-content: space-evenly;
    padding-left: 15%;
    align-self: center;
    height: 75px;
    align-items: center;
  }
}

#header {
  display: inline-flex;
  width: 100%;
  color: #fff;
  background-color: #000;
  height: 75px;
}

#navbar {
  display: inline-flex;
  width: 100%;
  justify-content: space-evenly;
  padding-left: 15%;
  align-self: center;
  height: 75px;
  align-items: center;
}

<div class="toggle-btn" onclick="toggleFunction()">
  <span></span>
  <span></span>
  <span></span>
</div>

<nav id="header">
  <img src="pantherlogo.png" alt="Beverly Panthers Logo" id="logo">
  <div id="navbar">
    <h3><a href="index.html">HOME</a></h3>
    <h3><a href="news.html">NEWS</a></h3>
    <h3><a href="team.html">TEAMS</a></h3>
    <h3><a href="history.html">HISTORY</a></h3>
    <h3><a href="contacts.html">CONTACTS</a></h3>
  </div>
</nav>
<div id="top">
  <img src="footballimg.png" alt="football" id="footballimg">
  <div id="motto">
    <h1>Restore our pride.</h1>
  </div>
</div>

javascript html css media-queries navbar

Answer 1

Answer №1

Here are two scenarios to consider:

Scenario 1:

When resizing the screen, the navigation items will be hidden and a burger button will appear. Clicking on this button will expand it to reveal the items. If you resize the screen without clicking the burger button first, it will return to its original appearance.

Scenario 2:

Similarly, resizing the screen will hide the nav items and display the burger button. However, clicking on the burger button triggers an event listener that runs the toggleFunction, resulting in the navbar element being hidden with the CSS property style.display = "none". This inline styling overrides media queries and CSS classes.

A recommended solution (general):

To address this issue, create utility classes for "hidden" and "visible" states of your navbar and apply them through event handlers. For example:

.visible {
  display: inline-flex;
}

@media screen and (max-width: 800px) {
  #navbar {
    display: none;
    /* other styling modifications */
  }
}

Then, utilize JavaScript to toggle the visibility of the navbar by adding or removing the "visible" class as needed.

A specific suggestion:

In your case, remove the conflicting styles for navbar at the bottom of your file to prevent CSS specificity conflicts. Instead, insert the following rule within the mobile view media query:

@media (max-width: 800px) {
    /* Other rules */

    #navbar.visible {
        display: inline-block;
        position: absolute;
        top: 75px;
        width: 100%;
        text-align: center;
        padding: 5px 0px;
        background: orange;
        height: auto;
    }
}

This adjustment ensures that the desired styling is applied only when the navbar has the "visible" class. Update your toggleFunction accordingly to manage the visibility state effectively.

Answer 2

Here are two scenarios to consider:

Scenario 1:

When resizing the screen, the navigation items will be hidden and a burger button will appear. Clicking on this button will expand it to reveal the items. If you resize the screen without clicking the burger button first, it will return to its original appearance.

Scenario 2:

Similarly, resizing the screen will hide the nav items and display the burger button. However, clicking on the burger button triggers an event listener that runs the toggleFunction, resulting in the navbar element being hidden with the CSS property style.display = "none". This inline styling overrides media queries and CSS classes.

A recommended solution (general):

To address this issue, create utility classes for "hidden" and "visible" states of your navbar and apply them through event handlers. For example:

.visible {
  display: inline-flex;
}

@media screen and (max-width: 800px) {
  #navbar {
    display: none;
    /* other styling modifications */
  }
}

Then, utilize JavaScript to toggle the visibility of the navbar by adding or removing the "visible" class as needed.

A specific suggestion:

In your case, remove the conflicting styles for navbar at the bottom of your file to prevent CSS specificity conflicts. Instead, insert the following rule within the mobile view media query:

@media (max-width: 800px) {
    /* Other rules */

    #navbar.visible {
        display: inline-block;
        position: absolute;
        top: 75px;
        width: 100%;
        text-align: center;
        padding: 5px 0px;
        background: orange;
        height: auto;
    }
}

This adjustment ensures that the desired styling is applied only when the navbar has the "visible" class. Update your toggleFunction accordingly to manage the visibility state effectively.

Navbar remains stuck in expanded position after screen size decreases

Answer №1

Similar questions

Using CSS to Position a Circle at the Top of a Border

What is the method to calculate row height in bootstrap framework?

"Utilizing AngularJS's ng-options feature to dynamically populate a select dropdown

Essential components to include in Bootstrap 4 customization

Having trouble with array slicing functionality?

Troubleshooting Promise Rejection in AWS Lambda with Node.js

The Datetimepicker component outputs the date in datetime format rather than a timestamp

What is the best way to extract a substring separated by two line breaks using a specific index?

"Enhance Your Website Navigation with a Expand/Collapse Menu Using

Utilizing Node and MongoDB to generate a shareable Favorites list with a unique URL

What is the method for defining a schema property as a SubDocument type in Mongoose?

working with variables in javascript

Display Material Popup in Angular before user leaves the page

In JavaScript, we are comparing two arrays that contain objects. We will then segregate the identical objects into one array and the unique objects into another

What is the best way to create text that dynamically wraps or moves to the next line?

Refresh the page without submitting any information

When working with React and trying to update data using the useEffect hook, I encountered an issue with an Array data. Unfortunately, using map or Object.keys(data).map did not produce the desired results. Can anyone provide guidance on

MongoDB's implementation of prototypal inheritance within stored objects

Adding one class at a time, with each new class being added every second

AngularJS ng-repeat filter fails to function with changing field names dynamically