Why won't my navigation bar disappear on smaller screens?

HTML & CSS
1

I’m pulling my hair out here lol!!!

I cannot get the navigation bar on the following page to disappear on smaller screens:

http://christopherbush.co.uk/school/

If you look in desktop, there’s a red navigation bar at the top of the site. I have replaced this with a drop down menu for smaller displays but for some reason I cannot hide this one!

I have used @media statements to set the display to none for everything under 1024px but it’s still there!!!

Here is the code:

/* 
GLOBAL STYLES
----------------
Add styles beneath this line that you want to be applied across your entire site */

div.drop {
	display: none;
	}

@media only screen and (min-width: 768px) {

div.drop {
	display: none;
	}

}

@media only screen and (min-width: 1024px) {

div.drop {
	display: block;
	}

}

I cannot see why it would still be displaying the div.drop on smaller screens when it’s clearly set to none.

2

Further down your stylesheet you have desktop-only styles which are overriding the media query.

	/* Main Site Navigation Menu */
	
	ul#top-nav.nav.fl {
	display: none;
	}
}

	div.drop {
	display: block;
	}
	
	.drop_menu {
	background:#c00;
	padding:5px;
	margin:0;
	list-style-type:none;
	height:30px;
	display: block;
}
2 Likes
3

Does this works

@media only screen and (max-width: 480px) {

div.drop {
display: none;
}

}

4

Why would they be overriding it when that media query is set for a min wider of 1024px? Also there are other elements that are hidden on the smaller screen and those are working as intended.

5

littlebirdy that would only hide it up to a max width of 480px. Anything above that and it’ll come back again.

6

Because your nesting isn’t what you think it is.

Enter the content of the CSS file “by direct input” here.

https://jigsaw.w3.org/css-validator/#validate_by_input

1 Like
7

It makes no difference what you put in your media query if as pointed out by technobear you have the same rule later in the style sheet.

Rules in a media query will be over-ridden by rules of same weight later in the code as per the normal cascade rules.

2 Likes
8

So why is it working for other elements?

In that same style sheet I have .header-text-container-right set to display “none” in the lower screen sizes and in the desktop media query it is set to “block”. That is working exactly as intended. I use the same technique on the div.drop and it doesn’t work! It makes no sense. That’s the whole point of media queries.

9

Use the Force Luke jigsaw CSS Validator chru5h

3 Likes
10

I’ll give it a go and report back here.

11

It has come back no errors found! Problem still exists.

12

Ahh I found the culprit. There was a rogue “}” in there ending the 1024px media query prematurely. I have moved it to it’s rightful position and all is working fine now.

3 Likes
13

Do you use “Inspect” in your browser?
With that you can quickly home in on such problems and see what rule on what line is affecting your css.

2 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.