In the process of trying to figure out how to stretch the navbar to fill the entire width of the screen I ran into something posted on here by another user. I am just starting out with bootstrap/css stuff. I was trying to figure out what was going on in this specific css file but couldn't for the life of me. I had a few questions if anyone can answer them. The CSS file contains this code:
#media (min-width: 640px) {
/* 768px */
.navbar {
border-radius: 0px;
/* 4px */
;
}
}
#media (min-width: 640px) {
/* 768px */
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
#media (min-width: 640px) {
/* 768px */
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
}
#media (min-width: 640px) {
/* 768px */
.navbar-toggle {
display: none;
}
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-left: 0px;
/* -15px */
margin-right: 0px;
/* -15px */
;
}
.container-fluid {
padding-left: 0px;
/* 15px */
padding-right: 0px;
/* 15px */
;
}
.nav > li > a {
padding-left: 5px;
/* 15px */
padding-right: 5px;
/* 15px */
;
}
.navbar {
border: none;
/* 1px solid transparent */
margin-bottom: 0px;
/* 20px */
;
}
.navbar-collapse {
max-height: none;
/* 340px; */
padding-left: 0px;
/* 15px */
padding-right: 0px;
/* 15px */
;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #fff;
/* #e7e7e7 */
;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
/* #777 */
;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
background-color: #00752c;
/* transparent */
color: #fff;
/* #333 */
;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background-color: #00752c;
/* #e7e7e7 */
color: #fff;
/* #555 */
;
}
.navbar-default .navbar-toggle:focus {
background-color: transparent;
/* #DDD */
;
}
.navbar-default .navbar-toggle:hover {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000;
/* #888 */
;
}
.navbar-nav {
margin: auto;
/* 7.5px -15px */
;
}
.navbar-toggle {
margin-left: 15px;
/* 0px */
margin-right: 0px;
/* 15px */
float: left;
/* right */
;
}
body, html {
height: 100%;
width: 100%;
}
#media (max-width: 639px) {
.navbar-collapse {
border-bottom: 1px solid;
border-top: 1px solid;
}
}
.clear {
clear: both;
}
.navbar {
z-index: 1;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a:focus {
outline-style: none;
}
.navbar-nav {
background-color: #009b3a;
}
#header nav {
background-color: #009b3a;
color: #fff;
font-size: 13px;
height: 50px;
text-transform: uppercase;
}
#page {
margin-left: auto;
margin-right: auto;
max-width: 620px;
}
My questions are:
1) Why are there 4 #media (min-width: 640px) queries? I tried combining those 4 into one #media query but it broke the code. I don't understand why.
2) What exactly is going on in something like this?
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse
3) In this CSS file, you have some things referenced multiple times in different
#media (min-width:640px)
queries. For example:
You have
.navbar {
border-radius: 0px; /* 4px */
}
At the start and again in a different #media 640px query
.navbar {
border: none; /* 1px solid transparent */
margin-bottom: 0px; /* 20px */
}
Why is it referenced twice here? Couldn't we just combine it into .navbar class?
Help a noob understand CSS :)
Thanks
It depends where you put your media query. Notice that they appear after the style they are overriding. This is for clarity. Because CSS is evaluated from top to bottom, if the media is above the style - it will not be overridden.
is direct child of parent. Without this css will look anywhere inside parent element
Examples you have shown are not conflicting - Second one is not inside media. If there was a conflict the latter one would override one higher in the file. I would say multiple media here are for readability
Hope that helps. Play with this one if you want to know more about how CSS classes are overridden http://josh.github.io/css-explain/
yes and you can combine all 4 media queries....they are included...because that is sloppy work? basically its a judgement call here: probably each was added at separate times, and they are meant to be minified # some point. or that is in production and its not the best of style sheets. you can add them all into one media query, the border:none is going to override the entire border declaration(s), but border-radius is not included (asfaik, i don't see it on dev.moz in the short border style declaration. if it is and i'm wrong, the same applies, i would think, that everything property under the short form of border is reset to a style of none.
last question, the > is the child combinator selector, which only selects elements that are child descendants of the element(s)/classes/ids/, etc., named prior to the selector. so ul > li will only select list items that are direct descendants of unordered lists, where as ul li will select all list items that fall under an unordered list.
Some of your questions are difficult to answer without hearing form the developers themselves, but here are my best guesses:
1) Why are there 4 #media (min-width: 640px) queries?
The bootstrap css file isn't developed in css, but is the compiled result of many LESS files. These queries and css rules might have originally been split over several files, and this is just how the compiler has decided to squish it all together.
As to why this didn't work when you tried it, that's hard to say without seeing your code, but as TreeTree suggested, you may have accidentally introduced syntax errors (maybe you missed a curly brace somewhere?). But you're right, all things being correct, these rules can be wrapped in a single #media query.
2) What exactly is going on in something like this?
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse
The greater-than > symbol is a child selector. .container > .navbar-header means apply these rules to .navbar-header only when it is a direct child of .container
3) In this CSS file, you have some things referenced multiple times in different [#media] queries .. Why is it referenced twice here?
Again, this may just be an artifact of the compiled LESS files into a single css file. If you were writing your css by hand, you are correct in thinking that they could be combined into a single rule. Our compilers aren't always that smart, but they probably don't need to be - these types of files usually aren't read by people, and the impact on performance is minimal, if any.
1) You probably introduced some syntax errors when you merged them, especially if there is no indentation at all. Having 4 separate queries could just be a means of organizing code.
2) It's just 4 separate selectors that make use of the > selector which means immediate child/descendant. It will only search the children but not the children's children. More about it here.
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse
3) The lack of indentation has thwarted you. The first block of CSS is located within a query but the second block is not. I suggest adding some indentation so you can see for yourself.
In response to comment:
Given this HTML:
<div class = "foo">
<div class = "bar">
<div class = "bar"></div>
</div>
<div class = "bar">
<div class = "bar"></div>
</div>
</div>
.foo .bar will match every single .bar whereas .foo > .bar will only match the .bar whose parent is .foo. It will not match the inner .bar because their parent is .bar.
Thanks everyone. I definitely understand CSS a bit more now. I guess I just got unlucky with a case where the formatting made it hard to understand what was going on. That sort of thing certainly doesn't help when you're first starting out.
Related
I'm brand new to CSS so please forgive me if I'm missing something obvious. I've spent several hours on this and searched this website and have not been able to resolve my issue.
I have a Shiny (R) app that I am trying to add some custom styling to using CSS. I have been making change to the Navbar, which I am happy with so far. However, something in my CSS is causing undesirable behavior in mobile-sized screens, where the tabs of the navbar do not stack vertically and overlap with the main content:
Compared to the default, which is what I would like:
I know this is something related to my CSS because when I disable it this issue is resolved. I have tried many things and nothing so far has helped, I was wondering if someone might be able to point out in my CSS where I have introduced this problem and how I might resolve it.
Thanks in advance. CSS:
/*=============NAVBAR STYLING=============*/
/*Entire navbar*/
.navbar.navbar-default.navbar-static-top{
background-color:white;
height:60px;
/*margin: 10px;*/
margin:0px;
}
/*All navbar tabs*/
.navbar-default .navbar-nav>li>a {
/*Sets consistent height for navbar tabs, must be !important*/
height:60px !important;
justify-content:center;
align-items:center;
display:flex;
}
/*Style the *active* navbar tab*/
.navbar-default .navbar-nav>.active>a{
/*Make the active tab darker in color w/ white text*/
background-color:#676767!important;
color:white!important;
border-radius: 10% / 50%;
}
.nav-link {
position:absolute;
}
/*======Screen-width specific styling=======*/
#media (min-width:1276), (max-width: 1426px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 12px;
}
h2 {
font-size:26px;
}
.hometext {
font-size: 18px !important;
}
ol {
font-size: 18px !important;
}
}
#media only screen and (min-width:768px) and (max-width:1275px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 11px !important;
margin-top:10px !important;
}
h2 {
font-size:24px;
}
.hometext {
font-size: 16px !important;
}
ol {
font-size: 16px !important;
}
}
/* Next two classes keeps the navbar tabs on the same line in smaller windows */
.min-width{
overflow-x:auto
}
ul.nav{
display:inline-flex
}
}
#media only screen and (min-width:1px) and (max-width:767px) {
.navbar-default .navbar-collapse > li{
display: block!important;
}
.navbar-default .navbar-collapse > li > a {
float: none!important;
/*Removes grey line above tabs (overlaps with logo)*/
.navbar-default .navbar-collapse{
border-color:transparent;
}
}
I do not want to repeat the same property all the time on my CSS.
In my case, I have three media queries in which I change the property of padding of a specific element and after I need to put it as the beginning:
#media (max-width: 1000px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
#media (max-width: 750px){
ul > a{
padding-top: 16px;
padding-bottom: 16px;
}
}
#media (max-width: 500px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
As you can see, I have to put the same code on the first and on the third one media query and I would like to reduce the amount of lines of my CSS.
I would like to wrap these lines into a variable or something similar:
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
and use them in the whole CSS each time I need it.
I found that there is an experimental technology to create variables on CSS but that it has not been stabilized yet and it does not have a full browser support.
Thus, is there a method to use more than one line on CSS without repeating them?
Thanks in advance!
Just define the common rule without a media query and then use media queries to override it as necessary, like so:
ul a{
padding:20px 0;
}
#media (max-width:750px){
ul a{
padding:16px 0;
}
}
Alternatively, add min-width to your media queries and create a new one to define all the common rules in, like so:
#media (max-width:500px),(min-width:751px) and (max-width:1000px){
ul a{
padding:20px 0;
}
}
#media (min-width:501px) and (max-width:750px){
ul a{
padding:16px 0;
}
}
You could use one query with min and max width Fiddle, also only li element can be direct child of ul element (i used color instead of margin form demo)
ul a {
color: blue;
}
#media screen and (min-width: 500px) and (max-width: 750px) {
ul a {
color: red;
}
}
<ul>
<li>Lorem</li>
<li>Lorem</li>
</ul>
I have this html that I cannot edit:
<div id="menu">
Home |
Meet Our Physicians |
Services |
</div>
I have to make it responsive and when when on mobile I want to delete the |
How can I target it? Something like:
#media screen and (max-width:480px){
element{
display:none;
}
}
Try this:
#media screen and (max-width:480px) {
#menu > a{
margin-right: -10px; /* getting the elements closer */
}
#menu {
color: transparent; /* making the open text's color transparent */
}
}
Working Fiddle
The only way to emulate this (CSS cannot target text that is not part of an element, unfortunately), is to target the containing element and then override the styling in the descendant <a> elements:
#media screen and (max-width:480px){
#menu {
font-size: 0;
}
#menu a {
font-size: 16px; /* or whatever */
margin: 0 0.5em; /* or whatever, to restore some spacing between elements */
}
}
Edit:
Maybe something like that:
#media screen and (max-width:480px){
#menu {
text-indent: -9999px;
font-size: 0px;
}
#menu a {
text-indent: 0px;
font-size: 14px;
}
}
I have been trying to figure out how to use a media query to collapse the bootstrap 3 collapsible nav without using LESS. I haven't made it around to using LESS with bootstrap yet, I'm just using regular CSS. It seems that nothing I do will trigger the navbar to collapse. I'm trying to collapse it at anything smaller than 950px across.
Any ideas? I can't find any posts that refer to regular CSS doing what I need.
You can use this CSS to change the breakpoint of the navbar..
#media (max-width: 950px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Working demo: http://bootply.com/105174
I want to collapse my navbar in earlier resolution than 768px, for example 992px, how would I do that? thanks! (I know I can customize it on the bootstrap page, but I don't want to start my project over again with new bootstrap.css file)
If you don't want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me:
#media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
}
Demo: https://jsfiddle.net/0pmy8usr/
Add this in a separate CSS file and include it after bootstrap.css
UPDATE for Bootstrap 4:
#media(max-width:900px) {
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar-toggler {display: block !important;}
.navbar-toggleable-sm.collapse {display:none !important}
.navbar-toggleable-sm.collapse.in {display:block !important}
}
Demo: https://jsfiddle.net/mkvhbgnp/3/
In variables.less, change
#grid-float-breakpoint: #screen-sm-min
to
#grid-float-breakpoint: #screen-md-min;
If you need to collapse your navbar in earlier resolution than 768px so you will need to use #media min-width and max-width, and you don't need to start new project for doing that simply create new .css file ( example: custom.css) and inset it under your main bootstrap.css to override its values. and write this code inside it :
CODE:
#media (min-width: 992px) {
.collapse {
display: none !important;
}
}
Also, you can have a look at this post: change bootstrap navbar collapse.
I hope this will give you the solution.
You can also override the bootstrap classes that close the gap. Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.
#media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
/*margin: 7.5px -15px;*/
margin: 7.5px 50px 7.5px -15px
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
click here for the live demo code
The solution is actually very simple. Use .navbar-expand-lg or .navbar-expand-xl class with <nav> tag.
Example :-
<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
</nav>
Thank you all.
I would suggest bringing in bootstrap into your project in lieu of a CDN and simply look for the media query that looks like this:
#media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; //...etc.
And change it to:
#media (min-width: 900px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; // ...etc.
Or if you are using a CDN, create an override to that specific media query.
If you want it is menu to be collapsable from medium devices
You can directly do by
toggleable="md"
Else you can go for other force collapsable approach by setting sccs/ less of bootstrap.