asked on

Need media query help for background color

dev2magickitchen.com - on screenfly, when I select the size tablet 800x400 or 900x600, the background of the navigation bar is purple. On these sizes, it needs to be white, but I can't seem to come up with the right media query to make that work.

I tried @media (min-width: 600px) and (max-width: 800px) {
background-color: #fff;
}
and that works, but it also makes the background white on desktop size. Not sure what I am doing wrong there. Another alternative at that size would be to keep the background, but turn the hamburger icon white. That would work for me as well. Thanks in advance.

lenamtl

Hi, you need to specify the class name or id to apply the color to only this item.

replace .menuclassname by the name of the menu class
if you use a menu id then replace .menuclassname by #menuid

@media (min-width: 600px) and (max-width: 800px) {
 .menuclassname {
   background-color: #fff;
  }
}

Open in new window

to find the actual class name use Chrome and right click and inspect the section

By the way the link you provided is not working.

Melody Scott

ASKER

Oh, sorry, was doing that within the navbar class, I think. attaching a sample.

.navbar {
		z-index: 190;
		border-radius: 0;
		background-color: #6D3088;
		-webkit-transition: all .5s;transition: all .5s;
		@media (min-width:768px) {
			box-shadow: 0 9px 10px -12px;
			height: 107px;
    	margin-top: -37px;
			position: fixed;
	    right: 0;
	    left: 0;
	    top: 70px;
		}
		@media (min-width: 600px) and (max-width: 800px) {
         background-color: #fff;
          }
	@media(max-width: 991px) {
			padding: 15px;
			margin-bottom:0;
			margin-top: 0;
			padding-bottom: 0;
			top: 0;
			height: auto;
		}
		@media(max-width: 767px) {
			padding: 0;
			box-shadow: 0px 4px 6px -4px  rgba(0, 0, 0, 0.25);
		}
		& > .container {
			@media screen and (min-width:992px){
				  margin-top: 47px;
					padding: 0;
			}
		}
		a {
			text-transform: uppercase;
			color: #fba73b;
			font-weight: 600;
			font-size: em(13px);
			letter-spacing: .04em;
			     padding-bottom: 24px;
            .glyphicon-menu-down {
                padding-left: 7px;
                &:before {
                    content: url('../img/arrow-small-pale-orange.svg');
                }
	
		
            }
        }

Open in new window

ASKER CERTIFIED SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chris Stanyon

You look like you're using SASS or LESS as a pre-compiler so you should be able to add media queries inside the class. You may also want to check your existing source. I would expect you've already got media variables or mixins defined somewhere, in which case you can use them directly:

.navbar {

    background-color: red;

    @media @desktop {
        background-color: green;
    }

    @media @tablet { 
        background-color: blue;
    }

}

Open in new window

That's one of the great things about using a pre-compiler :)

Melody Scott

ASKER

Thanks! I actually ended up making the icons white and the background purple to match the rest of the site, but this was very helpful!