So I have been fiddling around with my site on Nekoweb, trying to fix the navigation bar. I have styled it already with css. The styling seems to work just fine on index.html (my main/home page). However, when I link the stylesheet on other pages, such as the gallery, the styling does not get applied fully, and thus does not stay consistent. How do I fix this?
The navbar appears horizontally, just as I want it to. However, stuff like the font size does not change for some reason. On the home page, it is 18px, but on other pages it looks more like 12px.
Here is the snippet for said navbar on index page:
.nav-list {
margin: 0;
padding: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 2rem;
}
.nav item a {
text-decoration: none;
color: black;
font-size: 18px;
}<navbar>
<ul class="nav-list">
<li class="nav-item">
<a href="site.org/index.html">Home</a>
</li>
<li class="nav-item">
<a href="site.org/gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a href="site.org/contact.html">Contact</a>
</li>
</ul>
</navbar>And here is the snippet for the gallery page:
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a href="site.org/index.html">Home</a>
</li>
<li class="nav-item">
<a href="site.org/gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a href="site.org/contact.html">Contact</a>
</li>
</ul>
</navbar>Font size change could happen because of the typo in your code. In CSS it seems you missed the "-". (.nav-item a)
.nav-item a {
text-decoration: none;
color: black;
font-size: 18px;
}