It appears that achieving this without JavaScript may not be possible. If you're looking to trigger events based on screen width rather than individual element width, using media queries in CSS is the way to go.
For further information on whether media queries can resize based on a div element instead of the screen, check out this post: Can media queries resize based on a div element instead of the screen?.
I would suggest exploring setting widths using em or vw, as the latter will adjust dynamically with the viewport size. Additionally, utilizing media queries allows you to toggle display based on different screen sizes.
Find more details at: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
More insights at:
Using viewport width/height measures can facilitate font resizing and enable your menu width to adapt to browser resizing. By incorporating media query breakpoints, you can control when to toggle display or set fixed values.
If your goal is simply to hide a horizontal menu bar (e.g., top nav bar) when the screen reaches a specific width, you can leverage browser developer tools or Bootstrap documentation to identify the respective class name and then apply additional CSS to hide it.
Here's an example of how I handle this in a responsive app:
div.top-nav {
/* specify attributes here */
}
div.bottom-nav.menu {
visibility: hidden;
}
@media only screen and (min-width: 730px) {
/* define fixed max values beyond tablet screen size if needed for font scalability */
}
@media only screen and (max-width: 991px) {
/* implement adjustments at desired widths during screen resizing */
}
@media only screen and (max-width: 730px) {
/* modify element properties for tablets or similar devices */
}
@media only screen and (max-width: 500px) {
/* adjust element properties for phones */
.top-nav-item {
display: none !important; /* hide on phones and display bottom nav items 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;
}