Navigate Behind Slider on Scrolling

My menu bar is going behind the cycle slider when I scroll down. It works fine on other sections but only causes trouble on the slider. I have tried using z-index 1, but it's not working. Can anyone provide a solution? I'm not sure what I'm doing wrong. Check out the live demo here

*{
    margin: 0;
    padding: 0;
}

/* Top Menu Start Here */

.top_nav{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 1;
    transition:all 0.7s ease;
    -webkit-transition:all 0.7s ease;
    -moz-transition:all 0.7s ease;
    -o-transition:all 0.7s ease;
    -ms-transition:all 0.7s ease;
}

.container{
    height: 100vh;
    width: 100%;
    max-width: 100%;
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
}

.site-dt{
    background-color: #fff;
    height: 573px;
    width: 100%;
}


#slider-main{
    height: 578px;
    width: 100%;
    overflow: hidden;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#slider-main #slider img{
    height: 100%;
    width: 100%;
}

.section_about{
    height: 573px;
    width: 100%;
    background-color: #de5670;
    overflow: hidden;
    position: absolute;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<Script type ="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<header>
    <div class="top_nav">
    </div>
</header>
<div class="container">
</div>
<div id="slider-main">
<div id="slider" class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    >
    <div class="cycle-pager">

    </div>
<img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
</div>
<div class="section_about">

</div>
</html>

Answer №1

Apply the CSS properties position:fixed and z-index to the header element

header{
    position:fixed;
    z-index:999;
}

Answer №2

body{
    margin: 0;
    padding: 0;
}


/* Styling for the Top Menu */

header {
  display: block;
  height: 90px;
  background: rgba(0,0,0,.5);
}

.container{
    display: block;
    height: 100vh;
    width: 100%;
    background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig") no-repeat center;
  background-size: cover;
}

.site-dt{
    background-color: #fff;
    height: 573px;
    width: 100%;
}


#slider-main{
    width: 100%;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#slider-main #slider img{
    height: 100%;
    width: 100%;
}

.section_about{
    height: 573px;
    width: 100%;
    background-color: #de5670;
    overflow: hidden;
    position: absolute;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<Script type ="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
  <header></header>
  <div class="container"></div>
  
  <div id="slider-main">
  <div id="slider" class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    >
    <div class="cycle-pager">

    </div>
  <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
  </div>
  </div>
  <div class="section_about">

  </div>
 </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manipulate the content of any webpage without using external extensions by injecting your own HTML, CSS, and JavaScript code

I am currently following a tutorial on how to draw shapes on a local webpage using Canvas. I came across this helpful article on Html5 canvas paint. Everything is going smoothly, but now I am interested in replicating the drawing functions/CSS/HTML and "i ...

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

After doing some research on Stack Overflow about defining a minimum width for a responsive layout in Bootstrap3, I encountered conflicting answers related to "media queries." My goal is to make my layout responsive up to a certain point. Once it reaches, ...

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

Scroll to the top of jQuery DataTables when clicking pages in a random order from the bottom to the top and

In my current project, I am working with jQuery Datatables and I need to customize its default behavior. Currently, when I navigate to page 61, the page scroll remains at the bottom of the page. However, if I then click on a lower page number like 60, th ...

Content located on the right-hand side of the menu

I am currently working on a vertical navigation menu design, but I am facing some issues with aligning the text to start from the very left edge of the element. HTML <div class="jobs-links"> <ul> <li><a href="renovations. ...

What is the best way to make the child Div float to the bottom of the parent Div?

Screenshot I attempted various CSS techniques in an effort to make the .booknetic_appointment_container_footer float to the bottom of #booknetic_theme_5, but unfortunately, I was unsuccessful. The closest solution I found involved hardcoding padding, but ...

Issue with Bootstrap4: organizing columns correctly within and outside a container

I've hit a roadblock while working on a project and can't seem to find the right solution. I've already created a design in Photoshop to illustrate what I'm trying to achieve: Photoshop Design. Basically, I want the main content inside ...

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. Howeve ...

How to perfectly align an element within a div using Bootstrap

Utilizing bootstrap here. Currently trying to center the h1 element within the div, but so far I have been unsuccessful. It consistently remains aligned to the left. Attempts have included using bootstrap's center-block helper class, as well as the fl ...

Click on the anchor tag to reveal additional content beyond the default display

This question stems from a previous discussion on the topic at: Only show specific div with anchor In my profiles.html page, there are profiles of around 20 people all grouped under a class named "profile" and unique ids such as "example-name1", "example ...

Ways to revert all modifications to styles implemented using JavaScript

Hey there, just checking in to see how you're doing. I was wondering if there's a way to reset all the styles that have been changed using JavaScript? I'm referring to the styles shown in this photo: https://i.sstatic.net/Zawjt.png Thanks ...

Guide to positioning Navigation Bar in the center

I'm currently in the process of updating my website, but I've encountered a problem that I can't seem to solve. The issue revolves around the positioning of my navigation bar. Currently, it is situated below some JavaScript content and on t ...

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

I'm struggling to understand how to use the Beautifulsoup find() function with this particular HTML code

I have been attempting to extract specific information from a webpage using Python and Beautiful Soup, but I am struggling to correctly identify the path to the data I need. Here is an example of the HTML code: <div class="operator active" data-operato ...

What is the process for converting inline SVG images on the server?

Looking to use inline SVG as a background-image for another element? Check out this example that currently only works in Chrome. If you need an alternative method, take a look at the simpler inline SVG from the RaphaelJS demo here. <svg height="480" ve ...

Is the PHP Ajax parameter missing during the upload process?

I'm attempting to do a simple upload, but I seem to be struggling. It could be that I'm not understanding it properly, or perhaps it's just too late at night for me to figure it out. After doing some research, I came across this example on ...

Stop unauthorized pages from hijacking login cookies

I have a website called where users can create their own HTML pages accessible through the link if the username is "USR" and project is "PROJECT". However, there is a security concern... Currently, I store users' login tokens as cookies. But what ...

Sometimes, the `undefined` TypeError can unexpectedly pop up while making Ajax calls

Here is my issue with AJAX request and response: I have around 85 HTML pages that all use the same AJAX request. However, when working with these files, I sometimes encounter the following error. AJAX $(document).ready(function(){ localStorage.setIte ...

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

How can one retrieve elements from a loaded webpage?

I've been using the jQuery function .load() to load a page and I'm trying to find a way to access HTML elements within the loaded page from the source page once it's finished loading. The only method I've come across so far is to add pa ...