I am trying to change the color of the text in my header right widget when I scroll down the page. I want the text to change from white to orange when I scroll down.
Here is the CSS I tried adding:
#media only screen and (min-width: 800px) {
.header-scroll .site-header {
color: #FF6600 !important;
}
}
.header-right {
color: #fff;
}
!important; is not overriding the white color I assigned to the header right text.
Here is my website: https://asdeathdouspart.com/
Any ideas or help? Thank you!
I think you are targeting the parent, not the child, try this:
.header-right {
color: #FF6600 !important; }
You have an error in your media query. You close the brace too early
#media only screen and (min-width: 800px) {
.header-scroll .site-header {
color: #FF6600 !important;
}
.header-right {
color: #fff;
}
}
Related
I have removed some elements from a wordpress theme/template, however they have not worked fully
Issue 1: Header on page still contains gray
https://www.bodyclocktherapies.co.uk/?post_type=product
Issue 2: Background image remains on mobile devices and not on desktop
https://www.bodyclocktherapies.co.uk/?post_type=product
Image: https://ibb.co/QdPc7V4
Tried some css code, but has not worked
Issue 1
#cms-theme.woocommerce.archive #cshero-header.header-1 {
background-color: #ffffff;
}
#cshero-header-navigation.col-xs-12.col-sm-12.col-md-12.col-lg-12 {
background-color: #ffffff;
}
a:hover {
background-color: #ffffff;
}
Issue 2
#cms-theme.woocommerce.archive #cms-content {
background-color: #ffffff;
}
#cms-theme.woocommerce.single-product #cms-content {
background-color: #ffffff;
}
#main.site-main {
background-color: #ffffff;
}
I should have a complete white header and clear bacground on all devices
You can simply right click and used inspect element for this.
For First issue used this css:
#cms-theme.woocommerce.archive #cshero-header.header-1 > .container,
#cms-theme.woocommerce-page.archive #cshero-header.header-1 > .container {
background-color: #fff;
}
#cms-theme.woocommerce.archive #cshero-header.header-1,
#cms-theme.woocommerce-page.archive #cshero-header.header-1 {
background-color: #fff;
}
#media (min-width: 993px){
#cshero-header.header-1:before {
background-color: #fff !important;
}
}
For Second issue:
Background image come in after selector so that you need to hide that in mobile using media query
#media (max-width: 767px){
#cms-theme.woocommerce #page:after,
#cms-theme.woocommerce-page #page:after {
display: none
}
}
when I go to different views like 1024 X 768 then hover is acting as click. Buts its working fine in normal laptop size window.
when I hover over link it changes color to blue, but in small size screen it doesn't change color on hover, it change color on click
Below is HTML code
<div class="account-wrapper">
<ul>
<li>{{...}}
<span class="helpIcon icon-interface-question-mark" (click)="toggleHsaInfo()">
</span>
</li>
</ul>
<div>
Below is scss code
.account-wrapper {
border-bottom: 1px solid $border-color;
.icon-interface-question-mark {
position: relative;
cursor: pointer;
&:hover {
color:blue;
}
}
I tried to solve like this
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
{
.account-wrapper{
.icon-interface-question-mark{
&:hover {
color: blue;
}
}
}
}
I believe your question is related to mobile devices without the ability to hover. You can accomplish this in various ways but I prefer CSS media queries.
.account-wrapper {
border-bottom: 1px solid green;
.icon-interface-question-mark {
position: relative;
cursor: pointer;
}
}
#media (hover: hover) {
.helpIcon:hover { color: blue; }
}
#media(hover:none){
*:hover { color: inherit !important; }
*:active {color: blue !important;}
}
You can also try #media(hover:on-demand)
Example: https://stackblitz.com/edit/angular-ou67ut?file=src%2Fapp%2Fapp.component.scss
I am creating a website using Bootstrap and want to resize the Navbar height when the browser screen is min-width: 268, I am using a media query to do this but for some reason the media query changes the height of the Navbar before the screen has been made smaller, can someone please help, code is below.
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 105px;
}
#media only screen and (min-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
If you want this style to apply when the width is LESS than 286px, use max-width. Try this:
#media only screen and (max-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
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 am trying to use media queries to make my layout responsive to the screen size. I'm just testing it out at the moment and I can't for the life of me get the method to work. I simply set up a media query that's supposed to change the background color of my links to red when the screen goes below 480px, but it just doesn;t work when I shrink my screen.
You can see this in action at http://www.noellesnotes.com
Any help would be appreciated.
Here's the relevent code:
HTML:
<div class="site-navigation">
About
Work
<div class="site-title">Noelle Devoe</div>
Blog
Contact
</div>
CSS:
.site-navigation a{
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
}
.site-navigation a:hover{
font-weight: bold;
background-color: rgb(242,168,134);
color: rgb(255,255,255);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
#media only screen and (max-device-width: 480px) {
.site-navigation a{
background-color: red;
}
}
change your max-device-width to max-width
#media only screen and (max-width:480px){
.site-navigation a {
background-color: red;
}
}
Should do the trick for you. Also a great page to look at is the media queries page on MDN
USE IT LIKE THIS:
#media only screen and (max-width: 480px){
}
this would be a good read http://css-tricks.com/snippets/css/media-queries-for-standard-devices/