Having trouble putting image header above nav bar that sticks when scrolled past

Question

I'm trying to create a website in which there is a header image, with the navigation bar under it. I'm having issues though where I'm using the jquery code and whatnot trying to get it to work but my header image is still showing up below the navigation bar. I am including the link to the jquery script in my styles. Here's what I have:

$(function() {
  // Check the initial Poistion of the Sticky Header
  var stickyHeaderTop = $('#stickyheader').offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > stickyHeaderTop) {
      $('#stickyheader').css({
        position: 'fixed',
        top: '0px'
      });
      $('#stickyalias').css('display', 'block');
    } else {
      $('#stickyheader').css({
        position: 'static',
        top: '0px'
      });
      $('#stickyalias').css('display', 'none');
    }
  });
});

#stickyheader {
  width: 100%;
}

#stickyalias {
  display: none;
  height: 10px;
}

#unstickyheader {
  margin-bottom: 20px;
}

#othercontent {
  margin-top: 20px;
}

h1 {
  padding: 60px 0px 30px 45%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

p {
  font-size: 50px;
  background: darkred;
}

<html>

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div id="unstickyheader">
    <img src="ingredient-banner.jpg">
  </div>
  <div id="stickyheader">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>

  <div id="stickyalias"></div>

  <div id="othercontent">
    <h1>Sinful Cuisine</h1>
  </div>
</body>

</html>

the code for it is in the
[here is the image i was using](http://www.seawardglobal.com/assets/Uploads/ingredient-banner.jpg) — Corrina Spurlin, Oct 27 '17 at 02:27
I am sorry but can you please elaborate what you actually want to achieve. Your header image is up below dropdown? what this means. — Rajan Benipuri, Oct 27 '17 at 02:36
I want the header image to appear above the navigation bar like [this website does](http://www.delish.com/). Then when i scroll down the navigation bar will stick to the top. My problem right now is just that the image isn't appearing above the navigation bar but below it — Corrina Spurlin, Oct 27 '17 at 02:38

score 0 · Answer 1 · answered Oct 27 '17 at 02:43

Put the image in a li and give it class log and use this css:

.logo {
  float: right;
  margin-right: 20px
}

.logo img {
  height: 40px
}

like in example below:

$(function() {
  // Check the initial Poistion of the Sticky Header
  var stickyHeaderTop = $('#stickyheader').offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > stickyHeaderTop) {
      $('#stickyheader').css({
        position: 'fixed',
        top: '0px'
      });
      $('#stickyalias').css('display', 'block');
    } else {
      $('#stickyheader').css({
        position: 'static',
        top: '0px'
      });
      $('#stickyalias').css('display', 'none');
    }
  });
});

#stickyheader {
  width: 100%;
}

#stickyalias {
  display: none;
  height: 10px;
}

#unstickyheader {
  margin-bottom: 20px;
}

.logo {
  float: right;
  margin-right: 20px
}

.logo img {
  height: 40px
}

#othercontent {
  margin-top: 20px;
}

h1 {
  padding: 60px 0px 30px 45%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

p {
  font-size: 50px;
  background: darkred;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div id="stickyheader">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li class="logo">
        <img src="https://vignette.wikia.nocookie.net/gtawiki/images/9/9a/PlayStation_1_Logo.png/revision/latest?cb=20100130082645">
      </li>
    </ul>
  </div>

  <div id="stickyalias"></div>

  <div id="othercontent">
    <h1>Sinful Cuisine</h1>
  </div>
</body>

</html>

Having trouble putting image header above nav bar that sticks when scrolled past

1 Answers1