Tips for keeping the header section anchored to the top of the page

I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax effect in the header section, could that be causing the issue?

.parallax-window {
  background: transparent;
}

.parallax_bg {
  z-index: 2;
  position: relative;
  color: #FFFFFF;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
  <div class="parallax_bg">
    <div class="top_area">
      <div class="header_area">
        <div class="container">
          <div class="row" id="navbar-example">
            <div class="col-md-2">
              <div class="logo">
                <a href="#"><img src="img/header_img/logo.png" alt=""></a>
              </div>
            </div>

            <div class="col-md-10">
              <div class="main_menu">

                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                </div>


                <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#slider">Home</a></li>
                    <li><a href="#food_about">About</a></li>
                    <li><a href="#igredients">Ingredients</a></li>
                    <li><a href="#food_menu">Menu</a></li>
                    <li><a href="#reviews">Reviews</a></li>
                    <li><a href="#reservations">Reservations</a></li>
                  </ul>
                </div>
                <div class="social_links">
                  <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="header_text_area">
        <div class="container">
          <div class="row">
            <div class="col-md-12 text-center">
              <div class="header_text">
                <h2>the right ingredients <br /> for the right food</h2>
                <a href="#" class="btn-filled">BOOK A TABLE</a>
                <a href="#" class="btn-filled yellow-color-btn">SEE THE MENU</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

Experiment with adding navbar-fixed-top to the header class.

Answer №2

Are you aiming for this specific outcome?

.parallax-window {
  position: fixed;
  top: 0px;
  left: 0px;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
  <div class="parallax_bg">
    <div class="top_area">
      <div class="header_area">
        <div class="container">
          <div class="row" id="navbar-example">
            <div class="col-md-2">
              <div class="logo">
                <a href="#"><img src="img/header_img/logo.png" alt=""></a>
              </div>
            </div>

            <div class="col-md-10">
              <div class="main_menu">

                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                </div>


                <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#slider">Home</a></li>
                    <li><a href="#food_about">About</a></li>
                    <li><a href="#igredients">Ingredients</a></li>
                    <li><a href="#food_menu">Menu</a></li>
                    <li><a href="#reviews">Reviews</a></li>
                    <li><a href="#reservations">Reservations</a></li>
                  </ul>
                </div>
                <div class="social_links">
                  <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="header_text_area">
        <div class="container">
          <div class="row">
            <div class="col-md-12 text-center">
              <div class="header_text">
                <h2>the right ingredients <br /> for the right food</h2>
                <a href="#" class="btn-filled">BOOK A TABLE</a>
                <a href="#" class="btn-filled yellow-color-btn">SEE THE MENU</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

Dividing internal CRUD/admin panel from the live application

Currently developing a moderately complex react app with redux. We have a production version that meets our requirements and now we are working on an administrative area for a local version of the application. This local version will only have basic CRUD f ...

javascriptreactjswebpackredux

Adjusting the height in AngularJS based on the number of items in a table

I've developed a straightforward AngularJS application with multiple tables on one page. In order to add scrolling functionality, I initially used a basic CSS code snippet like: tbody { overflow: auto; } I also experimented with the https://github. ...

htmlcssangularjsscroll

Ensuring the safety of PHP JSON output results on a web server

I am currently developing an app using phonegap that submits and retrieves data from a MySQL database hosted on a server (website). I have successfully implemented the data submission and retrieval features in the app. The data is fetched through AJAX fro ...

javascriptphpjqueryajaxphonegap

Navigating through the features of www.addthis.com is simple and straightforward

I am looking to integrate the addthis.com plugin into my website. Specifically, I want to pass my own data to the plugin when users click on the email link. This data should then be sent to the client. Is there a way to achieve this? ...

c#javascript

The count of records in MongoDB by the current month

Recently delving into MongoDB, I found myself in need of a way to retrieve the count of posts made in the current month. Keeping timestamps true in my PlateModel model, it appears as follows: { timestamps: true } The current code snippet in my Controller ...

javascriptnode.jsmongodbexpressmern

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs

Refine current attributes of an object in Typescript

In typescript, I have an object of type any that needs to be reshaped to align with a specific interface. I am looking for a solution to create a new object that removes any properties not defined in the interface and adds any missing properties. An exam ...

javascripttypescriptinterfacegraphql

Node.js - updating the value of a exported integer variable

In my file A.js, I have defined a module-level variable called activeCount and exported it using module.exports. In another file named testA.js, I am attempting to access and modify the value of activeCount. Despite my efforts, changes made to activeCount ...

javascriptnode.js

Utilizing Vue JS to set an active state in conjunction with a for loop

Currently in Vue, I have a collection of strings that I am displaying using the v-for directive within a "list-group" component from Bootstrap. My goal is to apply an "active" state when an item is clicked, but I am struggling to identify a specific item w ...

javascriptjqueryhtmltwitter-bootstrapvue.js

Dealing with 404 page not found error without replacing the default in Next.js 13

I followed the Next.js 13 documentation's suggestion to create a file called not-found.jsx in my app directory to handle 404 errors. But, despite placing it inside the app directory and intended for layout and loading purposes, it is not overriding th ...

javascriptreactjsnext.js

What is the best way to transfer a JSON object from Java to JavaScript?

I've been struggling to pass data from my Spring controller to JavaScript, but I haven't had any success so far. Would using ajax be the best approach for this task? Can you provide me with some hints on how to achieve this effectively? In my co ...

javajavascriptjsonspring

The horizontal scroll bar in Jquery Datatable keeps disappearing intermittently

Issue with Jquery Datatable: Horizontal Scroll Bar Disappearing Intermittently Lately, a footer element was added to the existing data table which previously functioned properly. However, since the addition of the footer, there have been intermittent prob ...

jquerydatatables

The PHP index is not being identified when accessed through the post method

I am delving into the world of PHP as a beginner and still learning the ropes. I tried to replicate a small script exactly from one language to another, but encountered an issue where the index from my HTML file is not being recognized in PHP. The tutorial ...

phphtml

Error: AsyncPipe received an invalid argument of type '[object Object]'. This has caused an error due to an invalid pipe argument

I'm currently working on developing a contact management system that includes CRUD operations using Angular 8 and Spring Boot. Every feature is functioning correctly except for the search functionality. My goal is to search for data based on a specifi ...

htmljsonangularspring-bootpipe

Troubleshooting Issue with Query Functionality in MEAN App's Find Request

I'm facing some challenges while working with queries in my MEAN App. Specifically, I am attempting to retrieve data that matches the input entered into a search field: $scope.searchInput = function(search){ $http({ method: 'GET', url: ...

javascriptrestexpressmean-stackmeanjs

Reacting - page is not refreshing

Describing my current scenario: I have a requirement where I need to be able to navigate to a /details page by clicking on an image. However, when I click on the image, the URL gets refreshed but my component does not load. I attempted various solutions ...

javascriptreactjsreact-router

Developing a synchronous loop in Node.js using the web-kit module

My goal with my app using node.js and webkit is to scan each proxy listed in a file.txt and determine if the proxy is working. However, I am encountering an issue where my loop does not wait for the "http.get" test on line 11 to complete before moving on ...

javascriptnode.jsasynchronousnode-webkit

The issue at hand is the lack of execution for the Mocha Chai `.end()`

I have encountered an issue while trying to write a Mocha chai test for a Nodejs API that was previously tested using Supertest. Strangely, the test always passes even when I intentionally specify wrong expected parameters. Below is the code snippet of th ...

javascriptnode.jsexpressmocha.jschai

Dealing with Array Splicing Issues in Angular

Being fairly new to the world of AngularJS, I suspect that I am just making a simple mistake. My goal is to splice the cardTypes array at the var newCard = cardTypes.shift(); line rather than using .shift() so that I can consider my ng-repeat index. Whil ...

javascriptarraysangularjsionic-framework

A guide to resolving cross-origin resource sharing issues using a reverse proxy

After creating a JavaScript web application for processing documents, I am now looking to integrate with web services like NLTK-server, TIKA-server, and SOLR for further analysis. While I can successfully access the REST endpoints of these services using c ...

javascriptajaxweb-servicescors