-2

I have a menu (.navigation) that I would like to hide instead of wrapping on next line if the screen width is small. But I can't figure out how to use javascript/jQuery to detect if the wrapping has occurred (and hide the navigation).

I cannot use media query becase it is based on specific width when the navigation will be collapsed.

How can i solve this?

.container {
  padding: 15px;
  background: lightgrey;
}

.navigation {
  float: right;
}

.navigation a {
  margin-left: 15px;
}
<div class="container">
  COMPANY LOGO
  <div class="navigation">
    <a href="#">Home</a>
    <a href="#">About us</a>
    <a href="#">Products</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </div>
</div>
Earlgray
  • 647
  • 1
  • 8
  • 31
  • 2
    use [media query](https://stackoverflow.com/questions/11796297/div-show-hide-media-query) and resize the browser and test where the wrapping happens – Naren Murali Aug 26 '22 at 12:20
  • Does this answer your question? [Hide div element when screen size is smaller than a specific size](https://stackoverflow.com/questions/13476267/hide-div-element-when-screen-size-is-smaller-than-a-specific-size) – Adarsh Mohan Aug 26 '22 at 12:21
  • I cannot use this solution because it is based on the exact width of the screen when the navigation is hidden. But I don't know how many links will be in the navigation because the user adds them himself through the CMS. – Earlgray Aug 26 '22 at 12:40

1 Answers1

0

If you must, you can use basic javascript:

if (window.innerWidth < yourNumber) {
    // hide navigation class
}
Roel
  • 1
  • Thanks, but the question is how to calculate yourNumber. – Earlgray Aug 26 '22 at 12:59
  • Well that is something that depends on your container width, logo width and in the end the width of you navigation `document.querySelector('.navigation').offsetWidth` with those numbers you should calculate when you can hide the element – Roel Aug 26 '22 at 13:23