Navigation bar not visible when scrolling

I recently purchased the Mix Responsive App Landing Page theme from Theme Forest and have had success customizing it, except for when I started removing unnecessary sections. Ever since the removal, the header does not function as intended - it should be hidden on page load and appear upon scrolling.

To see how it used to look, you can visit: .

I suspect that the issue lies within the JavaScript code, but my expertise in that area is limited.

HTML:

<!-- Header -->
        <header>
            <nav class="navbar navbar-custom navbar-top navbar-fixed-top sticky-navigation" role="navigation">
                <div class="container-fluid">
                    <a class="page-scroll btn-new btn-bold pull-right" href="#download">Download </a>
                    <div class="navbar-header page-scroll">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                        <!-- LOGO -->
                        <a class="navbar-brand nav-logo" href="#page-top">
                            <img src="images/headerlogo.png" height="28" width="40" alt="mix"/>
                        </a>
                    </div>
                    <!-- NAVIGATION LINKS -->
                    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a class="page-scroll" href="#page-top">Home</a></li>
                            <li><a class="page-scroll" href="#firstFeature">Features </a></li>
                            <li><a class="page-scroll" href="#team">Team</a></li>
                            <li><a class="page-scroll" href="#contact">Contact</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->

                </div><!-- /.container -->
            </nav>
        </header><!-- Header end -->

CSS:

/* Header and nav --------------------------------------------------- */
.sticky-navigation {
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-bottom: 1px solid #222;
    padding:5px 0 !important;
    margin-bottom: 0 !important;
    -webkit-backface-visibility: hidden;
    top: -100px;


}
.nav-logo{
    padding: 0px 15px;
    height: 50px;
    margin-top: 15px;
    overflow: hidden;
}
.nav-logo:focus{
    outline: none;
}
.navbar{
    margin-bottom: 0px;
}
.navbar-nav {
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navbar-nav li a {
    padding: 10px;
    line-height: 30px;
    font-size: 14px;
    color: #aaa;
    position: relative;
    background: transparent !important;
    font-weight: 700;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.navbar-nav li a:focus{
    outline: none;
}
.navbar-nav li.active a,.navbar-nav li a:hover {
    color:#Eb2629;
}
header .btn-new{
    padding: 8px 18px;
    font-size: 12px;
    margin: 6px 0px 6px 10px;
}
.navbar-toggle{
    padding: 5px 10px;
    margin-right: 10px;
}

Answer №1

After examining the provided link, it appears that the animation code is associated with a specific plugin.

// Scroll Plugin
$(window).scroll(function () {
    var secondFeature = $('#secondFeature').offset().top;
    var scroll = $(window).scrollTop();
    if (scroll >= 600) {
        $('.sticky-navigation').animate({"top": '0', "opacity": '1'}, 0);
    } else {
        $('.sticky-navigation').animate({"top": '-100', "opacity": '0'}, 0);
    }
    if (scroll >= secondFeature - 200) {
        $(".mobileScreen").css({'background-position': 'center top'});
    }
    return false;
});

In essence, when the scroll window surpasses 600px, the "sticky-navigation" descends, and conversely ascends when below this threshold.

This functionality should function as intended as long as the navigation element possesses the sticky-navigation class. If additional details are required, please provide further clarification on your requirements.

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

JQuery Mobile's Panel widget is the culprit behind the demise of the

I'm having some trouble adding a panel to my jQuery mobile page. Every time I try to input the code, all I see is a white screen with the loading widget, and nothing else happens. I have JQuery 2.0.0 hosted by Google, JQuery Mobile JS 1.3.1 hosted by ...

Setting up a nodejs application on a web server

As a newcomer to NodeJS, I am currently learning how to create a sample app using this technology. I have successfully tested it on my localhost, but now I am facing issues when trying to host it on a public server. var http = require('http'); ...

Issue with jQuery ajax and servlet communication

Hey there, I've been working with servlet, JSP, jQuery, and AJAX in my project. I've implemented AJAX to retrieve data from the name column in an Oracle database for auto complete functionality. Everything seems to be working fine initially, but ...

Is it possible to enqueue a handshake after already having enqueued one in Socket IO?

Encountered a 'cannot enqueue handshake after already enqueuing a handshake' error when attempting to establish a SQL connection in Node.js. Seeking assistance in resolving this issue. Below is the code snippet that I am working with: io.on(&a ...

Tips for performing an Ajax GET request in order to retrieve data from a Rails server and then transferring it to JavaScript (specifically for use with

I am working on displaying locations from a model with latitude and longitude columns on a Google Map using Ajax and JavaScript. My current approach involves the following code: map.js: function initialize() { var map; var latlng = new google ...

Fetching the exchanged messages between the sender and recipient - utilizing MongoDB, Express, and React for chat functionality

I am dealing with two collections named students and teachers in the mongodb database. The structure of a conversation between a student and a teacher involves arrays of messages within each object, as well as the IDs of the sender and receiver. I am seeki ...

Is there a way for me to place an image in the background with CSS? When I try to do so, the upper curve looks great, but the bottom of the image appears flat

.bg-pink{ background-image:url(https://i.sstatic.net/eF8tF.png); background-size: cover; margin-bottom: 44px; background-position: top; } <body> <!-- Top content --> <div class="top ...

Positioning the search bar to the left with react-bootstrap-table

Is there a way to move the search bar of react-bootstrap-table to the left instead of keeping it on the right? You can see an example here, at the bottom of the page: I know that you can create a custom search panel and input, but that seems like a compl ...

Obtaining the Span value inside a DIV when the text in the DIV is selected - JavaScript

I am dealing with a series of div elements structured in the following way: <div id="main1"> <span class="username">Username_1</span> white some text content inside div... blue some text content inside div... yellow some ...

Uploading files from a local directory to an API using node.js and multipart/form-data

I'm struggling to figure out how to upload a local file to a RESTful API service from my JavaScript application. The file I want to upload is located at "c:/folder/test.png" and I need to upload it to something like "localhost/uploads". I've sear ...

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

navigator.mediaDevices.getDisplayMedia({ audio: false, video: true }).then(gotMedia).catch(function(e) { console.log('getDisplayMedia() error: ', e); }); Triggering the above code will result in a popup like this. There is anoth ...

Converting an array to an object using underscore: a beginner's guide

My array consists of different subjects: var subject = ["Tamil", "English", "Math"]; Now, I want to transform this array into an object, structured like this: [{ "name": "Tamil" }, { "name": "English" }, { "name": "Math" }] ...

Is it preferred to utilize v-show in combination with v-for?

I understand that using "v-if" with "v-for" is discouraged, but I'm unsure about the case of "v-show" since it simply toggles the display attribute. Here is the code for reference. Essentially, I am trying to switch between 3 different types of fi ...

The Vue.js component fails to display when included within another component

I am experiencing an issue with a menu item not displaying properly in my Vue.js application. The menu item should display the text "This is a menu item", but for some reason it is not being processed and rendered by Vue. These are the main com ...

Dealing with unsupported CSS properties in Next.js or implementing @supports directives in Chakra-UI

Currently, I am working on a React component that adjusts opacity values based on the support for the CSS backdrop-filter directive: background={(() => { const opacity = isBackdropFilterSupported() ? 0.75 : 0.98 return ( `linear-gradient( ...

Adjust the window size smoothly to accommodate various height dimensions

Providing Some Background: I am currently developing a Chrome Extension where users have the option to launch it via the default "popup.html", or detach it from the top right corner to use in a separate popup window using window.open. This question also ...

Showing Information without NgFor Directives

I have successfully displayed data without using a ngFor loop. However, it is currently showing all the quote information from multiple customers. The CSS is arranged in such a way that the discount div is positioned next to the customerinfo div. Below is ...

Is it possible to uncover the mysterious HTML tag within a string of code?

I am searching for the unidentified HTML tag within a given string. For example: '<span>hello</span><p>address</p><span><Enter Your Name></span>' In this case, I need to identify and extract the unknown ...

Revamp Label on Yii Update Button

I am in the process of integrating a like button into Yii. When I click on the button, it triggers a controller action that increments the number of likes by 1 and updates the Button label to display the new value. How can I achieve this? Here is my view ...

Easily targeting elements and their descendants in jquery: What you need to know!

Within a div, there are nested divs that contain tables and other divs. How can I use jquery to select both the parent div and its children? The parent div has the class "AccordionTitle AccordionTitle-selected". I have attempted the following: var klo=$( ...