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'm using WordPress to build up a website. Yesterday afternoon everything was fine, then the header nav just crashed out of blue. It first started with showing unattributed focus properties but fixed that issue with a:focus. It works fine on the laptop, but not on mobile devices. It doesn't have active colours on small screens, but I wish it has. Thanks for helping out!
.site-header .tab a:focus{
color: #FF6508 !important;
outline:none !important;
}
.site-header .tab a:active{
color: #FF6508 !important;
}
.site-header .tab a:hover{
color: #FF6508 !important;
}
.site-header .tab a:visited{
color: #fff !important;
}
.site-header .tab a:after{
color: #FF6508 !important;
}
#media screen and (max-width: 800px){
.site-header .tab a:link{
color: #fff !important;
}
.site-header .tab a:active{
color: #FF6508 !important;
}
}
The colour you want for the :active pseudo-class is being over-written by
#media screen and (max-width: 800px)
.site-header .tab a:link {
color: #fff;
}
.site-header .tab a:link {
color: #fff!important;
}
It seems you are using JS to add a focus class to each element. You could use this same JS to add in style css to your elements. This will overwrite anything written elsewhere. It also seems that you need to remove .focus from all other nav li a upon clicking the most recent nav li a.
If you'd rather not JS, then to avoid overwriting CSS, maybe consider the hierarchy and specificity of your code. I would the following code lower down in your custom CSS file with a greater specificity. Maybe like so:
.site-header .primary-menu .tab a:active{
color: #FF6508 !important;
}
I am using wordpress publisher template.
The color of the mobile menu should be #051039 except the last one which is like the button, my problem is the background color of button is same #051039, so I want to change it to white.
I try to solve this problem by adding extra css code to the id of the link:
#menu-item-430 {
text-align: center;
border-radius: 5px;
background-color: #051039;
color: #fff !important;
}
but nothing happened. How can I fix it?
This is my site:
https://ijimfang.com
Use this style
.rh-cover .rh-c-m .resp-menu li:last-child > a { color: #fff !important; }
You can try this code. Please add this code to style.css file of your currently activated theme.
#media only screen and (max-width: 600px) {
ul#resp-navigation li:last-child{
text-align: right;
border-radius: 5px;
background-color: #ffffff;
border: 1px solid #051039;
}
ul#resp-navigation li:last-child a{
color: #fff !important
}
}
http://foodstylingmentor.com
This is a WordPress website. You can see the child menu item under the ABOUT ME menu item. Firefox and IE are following the CSS but Chrome don't follow. I have cleared cache and history on all browsers.
#media screen and (min-width: 600px) {
.main-navigation li ul li a:hover {
background: #efefef !important;
color: #7b0309 !important;
}
}
I also tried removing the #media etc. But still not working.
I already searched and tried to find solutions. But failed. So if anybody can help me, please do so.
This is happening because you have the background set as background: #efefef;
In the .main-navigation li ul li a class add:
background: -webkit-linear-gradient(#f7eabf, #936d28, #f7eabf, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
and the text should display like the parent text. Adding the above will cause a grey(ish) colour to appear because of this:
.main-navigation li ul li a:hover
{
background: #efefef !important;
color: #7b0309 !important;
}
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.