Is it possible to keep the size of a <div> element static when the user zooms in with css only?
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile
- Javascript onload and onunload
- How to adjust kerning for the unicode flat symbol
- jQuery button click not showing/hiding content
- Force div to have an even width and height?
- How to set min width on content but still never exceed parent container width
- How to download older versions of Chrome from a google official site
- 2 colors in one placeholder of input field
- How can I align my Bootstrap container to fit the full width of the webpage?
- HTML+CSS A4 page with automatic page breaks
- How do I use the reverse border radius at the top of a card? (CSS)
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- stop iframe from affecting load times
- Is there a simple way to make a HTML relational selection?
- Disable double-tap "zoom" option in browser on touch devices
- Resize image with javascript canvas (smoothly)
- How to redirect to new page when image is clicked? (html)
- I want to change the url in the base url but by removing the %20 character in the url
- Title tag is not working
- How to render raw html in the PyHTML library
- Line break in HTML with '\n'
- How to achieve a CSS footer "curtain" effect?
- How To Serve Image Size Based on Container, Not Screen Size
- Set the default value of an input field
- How to allow only English letters in input fields?
- ASCII 3D Text looks glitchy when used for a HTML Website
- How to style HTML5 audio tag?
- table with sticky header and horizontal scroll
- move words into a specific area