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?
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;
}
}
Related
I am using wordpress to develop a website called littleboyauciton.com. I added an image at the top right of my header, and added css code:
img.sslsecure {
max-width: 40%;
min-height: auto;
}
This is displayed normally on my computer screen. But when I use chrome to simulate the ipad screen, the picture cannot be displayed on the header.
I added the css code corresponding to the screen in css, but it still has no any effect:
#media only screen and (max-width: 768px) {
img.sslsecure {
background-attachment: scroll;
}
It is doing exactly what it should do, it takes up 40% of the width of it's parent div. When you inspect the element, you can see that the parent actually almost takes up 100% of the screen width.
You can fix this by adding extra css for different screen sizes. This can be done in the theme you are using.
Or you can add extra css and write a media query yourself.
See:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Edit.
I just saw that you've tried adding a media query. You did it right, yet you have to change the width of the element or the parent element. background-attachment: scroll; only applies to elements with a background-image. Since this is an img, it doesn't apply to this element.
Let'say, I don't want the image to be wider than 100px:
#media only screen and (max-width: 768px) {
img.sslsecure {
max-width: 100px;
}
}
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
How can I create a vertical navigation bar for smartphones and a horizontal navigation bar for desktops?
I need a navigation bar for this example: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown
You can give any element completely different styles at different screen sizes. Just use media queries:
#media (max-width: 768px /* Styles for 768px screen size and smaller */) {
.element {
background: red;
}
}
#media (min-width: 768px /* Styles for 769px screen size and larger */) {
.element {
background: blue;
}
}
Here's a helpful link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Use media queries. With these you define a break point. Within each break point you can assign different css rules to your divs etc.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
With this example you can simply change width to 100% to get the desired effect. But do this in a media query at your required break point and that way you have two + styles depending on screen size.
example css
I have a navigation bar, an example of which is available here: http://fiddle.jshell.net/4uq6y5fa.
This displays as expected when all the elements fit on the screen, but if I resize the window, bits of the menu start disappearing. How do I fix this?
Use CSS media queries:
#media only screen (//defined for particular width)
{
//code of nav bar and search box
}
e.g.
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Alternatively, you can define widths and heights in percentages(relatively), using em instead of pixels.
I don't really get what your point is, do you want to make the menu responsive or do you want to know what the problem is?
As for making it responsive, use media queries.
W3schools, The #media rule is used to define different style rules for different media types/devices.
So for example you make your width 100% for the screen size of 1920x1080 and 50% for the size of 1024x720. So your nav will "jump" to the 50% when someone resizes the website.
I am creating a website with a responsive layout.
I have two columns: Sidebar and Content.
The sidebar has 20% width and has a fixed position whereas the Content has 80% width with static position.
How do I stop the content from hiding under the Sidebar when the screen size is reduced?
overflow:hidden
Try adding that
you can do this with media queries
#media (max-width: 800px) {
#sidebar {
display: none;
}
}
When you make something fixed, it's taken out of the document flow. As such, the content should be hiding underneath the sidebar irrespective of whether the two columns widths are set to 20% and 80%.
You can see that here: http://jsbin.com/OQOSEZoF/3/edit (the words '80%' don't show).
So you will probably need to set padding-left: 20% on the content <div> anyway. That may solve your problem on it's own.
If however, if you have other content down the page, such as a footer that is being overlapped by the fixed div, you could use media queries to change styles depending on the screen size.
#media only screen and (max-width : 500px) {
#sidebar {
position: static;
}
#content {
padding-left: 0;
}
}
See the demo here: http://jsbin.com/OQOSEZoF/6/edit
When you resize the result to less than 500 pixels, the text in the footer becomes visible because the sidebar switches to static.