How to code a sticky navbar

HTML & CSS
,
1

Hi i’ve been attempting to code a sticky nav bar but every time I try It doesn’t work Here’s my code:


<a href="https://poodles-days.000webhostapp.com/index.html"><img src="images/Poodles_days logo.png"/></a>
  </div>

  <nav id="nav" class="fourteen columns">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li><a href="Instagram.html">Instagram</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="location.html">Location</a></li>
      <li><a href="Feedback.html">Feedback</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="Maintenance.html">Log In or Sign Up</a></li>
    </ul>
  </nav>

and here’s my css:


/* Base Grid */
.container .one.column			{ width: 40px;  }
.container .two.columns 		{ width: 100px; }
.container .three.columns 		{ width: 160px; }
.container .four.columns 		{ width: 220px; }
.container .five.columns 		{ width: 280px; }
.container .six.columns 		{ width: 340px; }
.container .seven.columns 		{ width: 400px; }
.container .eight.columns 		{ width: 460px; }
.container .nine.columns 		{ width: 520px; }
.container .ten.columns 		{ width: 580px; }
.container .eleven.columns 		{ width: 640px; }
.container .twelve.columns 		{ width: 700px; }
.container .thirteen.columns 		{ width: 760px; }
.container .fourteen.columns 		{ width: 820px; }
.container .fifteen.columns 		{ width: 880px; }
.container .sixteen.columns 		{ width: 940px; }

.container {
	margin-top: 50px;
}
.instagramContainer {
	margin-top: 50px;
	margin-left: 20%;
}




.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
 .f-nav{ z-index: 9999; position: sticky; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.nav { height: 42px;}
 .nav ul { list-style: none; }
 .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
 .nav ul li:first-child{ padding-left: 0;}
 .nav ul li a { }
 .nav ul li a:hover{ text-decoration: underline;}

#nav {
	margin: 13px 0 0 25px;
}

#nav ul li {
	display: inline;
	margin: 0 20px 0 0;
	margin-bottom: 130px;
}

#nav a {
	text-decoration: none;
}

#nav a:hover {
	text-decoration: underline;
}

#headerImage img {
	margin-bottom: 50px;
	max-width: 100%;
	height: auto;
}

#welcome {
	margin-bottom: 20px;
}

.feature img {
	margin-bottom: 15px;
	max-width: 100%;
	height: auto;
}

.logo {
  width:300px;
}
2

As I can see in your CSS code you are selecting navigation with .nav which means select HTML element with class="nav" but you are having nav as a value of ID attribute and nav as HTML element, so either select it by nav which will target HTML tag or #nav which will target ID.

2 Likes
3

@marklenon95 Please explain

1 Like
4

I thought marklenon95 did a good job in explaining the issue exactly. But I’ll try wording it differently.

The CSS has a selector that does not correspond to anything in the HTML.

Hence you need to either change the CSS selector so that it targets something in the HTML that does exist. Or change the HTML so that it matches the selector in the CSS

I typically write the HTML first and then write the CSS to go with it. And I typically try to avoid using id attributes as much as possible. But in this case, unless you want to rewrite the CSS, I would keep the CSS selector and replace the HTML id attribute with a class attribute unless the id is needed for some reason, in which case I’d add a class attribute.

3 Likes
5

@Mittineague Ok so that makes sense I will go back through my css

1 Like
6

So now the nav bar is bunched up and it still doesn’t stick.
Here’s my new Html:

<ul class="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li><a href="Instagram.html">Instagram</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="location.html">Location</a></li>
      <li><a href="Feedback.html">Feedback</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="Maintenance.html">Log In or Sign Up</a></li>
    </ul>
  </nav>

and my css:

.sticky {
   top: 0;
   position: fixed;
}

body {
   margin: 0;
}

.header {
    height: 100px;
    background-color: #ddcbaf;
    text-align: center;
}

.header h1 {
    margin-top: 0;
    padding-top: 20px;
}

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #BFFFF3;
}

.menu li {
    display: inline-block;
    text-align: center;
    width: 25%;
}

.menu li:hover,
.menu li:focus {
    background-color: #66FFE3;
}

.menu a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
}

.container {
  padding: 0 20px;
  color: #989898;
}

Here’s the website to take a look at what’s happening: www.poodles-days.000webhostapp.com/index.html

7

Add sticky class to your ul element
<ul class="menu sticky">

8

@marklenon95 Ok now it sticks but now there are three problems problem 1. is that it’s spread out over 3 lines and doesn’t touch both sides 2. The logo disappears and finally the text on the howl page except the nav has changed from black to grey.

9

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