I’m trying to make a responsive site, my navbar only seems to show when the screen is squashed and even then doesn’t show any links. Also, why is the second row of images 4 instead of 3?
Any help is much appreciated!
Is there a guide you’re following? It would be good to share that. I can see the links in a wide screen, but they are un-styled.
I was just using the code from W3Schools. I should have said I can see the links but yeah, I don’t know why they aren’t styled.
W3Schools is pretty big. Can you point to a particular guide?
I think you need to put the word “only” into your media queries, as W3Schools shows here.
Edit: Hmmm not sure this is the real problem. At least some of your media queries aren’t being parsed correctly though for some reason.
It looks like the braces are a bit off. The @media (max-width: 400px) block is never closed, so it ends up containing everything that follows it, which includes the .topnav definition. Because of that, once the screen width exceeds 400px, the .topnav class doesn’t exist. That’s why you’re only seeing the navbar styles on narrow screens.
I think it will start working if you close that block after the button definition.
@media (max-width: 400px) {
button {
padding: 5px 20px;
border: none;
font-size: 1.5rem;
}
} <--- add this closing brace
The same thing happens with the second @media screen and (max-width: 600px) block. I think you can consolidate those two max-width: 600px queries into one. So from this
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
to this:
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;} <-- EDIT: this is probably causing the navbar items (other than "Home") not to display
.topnav a.icon {
float: right;
display: block;
}
/* removed 3 lines here */
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
} <--- add this closing brace
EDIT: Sorry - I missed the part about the links not showing on small screens. That’s probably because of the .topnav a:not(:first-child) {display: none;} line. That hides everything except for the first item in the navbar. I’d try removing that and see if they start displaying.
3 Likes
Sorry, I meant specifically the responsive navbar guide.
I tried it and it still doesn’t work. I did just copy the code from W3schools for a responsive navbar, I knew it wouldn’t work perfectly but it’s not working at all. lol
Do you have a link to an easier guide for a navbar? Thank you!
I was just looking at your CSS and it’s still missing a closing brace here, as mentioned at the beginning of @greg’s post. Be sure to include it as well!
@media (max-width: 400px) {
button {
padding: 5px 20px;
border: none;
font-size: 1.5rem;
}
It’s just that there should be two closing braces.
Let us know if that works.
I tried, but no dice! I just tried using a totally different code and that’s still not working either.
I think reason the links don’t have styling on desktop is because you’ve put the first part of this tutorial inside a media query, whereas on W3 Schools the first block of CSS code is outside any media queries. Right now your CSS is saying to only apply the background color, padding, etc. when the screen is small.
It seems like something went wrong when you copied it over. I’d recommend deleting it and trying again, this time making sure that each bit of code goes after the previous one, so nothing gets inside a media query when it shouldn’t be. 
Okay I took out all the media queries, now it’s there but not showing the links and it messed up the whole layout. lol
Sorry, I just meant remove the navbar stuff and recopy it over! You’ll want to keep the other media queries that are doing layout stuff.
I think what’s on the test page now is a mix of approaches. I suggest following one guide all the way through with no changes, verify that it works, and then change it to suit your needs.
I was slow and I see you’ve marked this as solved, so I apologize if this is bad form. I put together a page that’s just a navbar with a few properties to demonstrate how it changes when the screen size shrinks. You can see it in action at subcultureofone - navbar
I’ll attach the code as well in case it’s helpful. I agree with @memo, but I also sometimes find a working example to be easier to grasp than a tutorial (or at least a helpful supplement). Hopefully it at least removes all the non-navbar stuff that can muddy the issue.
One thing I forgot earlier is that there’s an HTML <nav> element. I like to use that for navbars.
navbar page code
<html lang="en">
<head>
<title>subcultureofone - navbar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
/* Base navbar styling */
nav {
align-items: center;
overflow: visible;
}
/* Style <a> tags inside the <nav> */
nav a {
color: black;
padding: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none; /* don't underline links in the navbar */
}
/* change navbar item color when hovered over */
nav a:hover,
nav a:focus {
background-color: gainsboro;
}
/* add things in for small screens here */
@media (max-width: 600px) {
nav a {
color: white;
background-color: black;
}
nav a:hover,
nav a:focus {
background-color: green;
}
}
</style>
<body>
<nav>
<a href="/">home</a>
<a href="/feeds">feeds</a>
<a href="/other">other</a>
<a href="/more">more</a>
<a href="/less">less</a>
<a href="/surprise">surprise</a>
<a href="/login">login</a>
</nav>
</body>
</html>
I put it as solved because I’m going to start from scratch and I can’t delete the post. lol But I tried your code and it still won’t work on full size. I think it’s the inital layout code I got from codepen I’m using so I’m just starting over. But thank you!