0

I am currently using Bootstrap v3.3.6 and jQuery v1.9.1. I have an application that will collapse a horizontal navbar once a certain screen resolution is reached. I like how this functionality works and would like to maintain the current screen resolution breakpoint. What I would like to do is also collapse the navbar when the navbar reaches a certain width. The application allows different users to have different roles which could add or remove items from the navbar dependent on the users' role.

Is there a way through CSS to collapse the navbar based on the width of the navbar? Is javascript the only option?

Matt D.
  • 3
  • 2

1 Answers1

0

It does not seem possible without JavaScript. It's unclear exactly what you're trying to achieve, but you would have to use media queries in CSS to trigger events based on screen width, not individual element width.

This post: Can media queries resize based on a div element instead of the screen? covers the topic in question.

I would recommend looking at setting widths using em or vw. The latter will dynamically resize with viewport. You can then toggle display using media queries.

See: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

See: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Using viewport width/height measures are great for font resizing but might also allow your menu width to "flow" with the resizing of your browser, then you add media query breakpoints to toggle display or set fixed values once you reach a minimum or maximum.

If you are just interested in hiding a horizontal menu bar (e.g. top nav bar) when screen gets a certain width, you can use your browser developer tools or Bootstrap documentation to identify the class name of the element, and then add additional CSS to hide the element.

Here is an example of what I'm doing on a responsive app in the works:

div.top-nav {
  /* some attributes here */
}

div.bottom-nav.menu {
  visibility: hidden;
}

@media only screen and (min-width: 730px) {
  /* perhaps set fixed max values after screen gets beyond tablet so fonts do not get too big if resizable in huge resolution monitors */
}

@media only screen and (max-width: 991px) {
  /* some fixes at some desired width as screen resizes */
}

@media only screen and (max-width: 730px) {
  /* hide or change element properties for tablets */
}

@media only screen and (max-width: 500px) {
  /* hide or change element properties for phones */

  .top-nav-item {
    display: none !important; /* hidden on phone and display bottom nav items instead below */
  }
  .logo {
    max-height: 25px !important;
  }
  .avatar {
    max-height: 20px !important;
    max-width: 20px !important;
  }
  div.bottom-nav.menu {
    visibility: visible;
  }
  div.item.bottom-nav {
    font-size: 4vw;
  }
}
Community
  • 1
  • 1
Mike S.
  • 4,806
  • 1
  • 33
  • 35
  • Thanks @mike-s, the first post you linked was the answer to my question. I wish there was something similar to media queries that I could use to modify the CSS properties of the navbar once a max width of the navbar had been reached. – Matt D. Dec 27 '16 at 17:54
  • The recommended trick is to encapsulate within an iframe and then use media query which will work on it. That seems like your only non-JS solution at this time. – Mike S. Dec 27 '16 at 17:57
  • Try something like: https://benmarshall.me/responsive-iframes/ perhaps. But in original link someone suggested using iframe as container, then use media query for it. I think combination of this technique and media query you can pull it off. Good luck and thanks for accepting my answer! – Mike S. Dec 27 '16 at 18:00