The scroll header remains fixed in size despite being responsive

I've been struggling to resize a fixed header when the page is scrolled. Unfortunately, I'm having trouble getting the header to adjust its size as the scrolling happens.

$(document).scroll(function() {
  navbarScroll();
});

function navbarScroll() {
  var y = window.scrollY;
  if (y > 10) {
    $('.Header').addClass('small');
  } else if (y < 10) {
    $('.Header').removeClass('small');
  }
}
.Header {
  width: 100%;
  position: fixed;
  z-index: 1000;
  border-bottom: solid 2px #d8341f;
}

.Header--top {
  display: block;
  background: #fafafa;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.tweak-site-width-option-full-background .Header-inner {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.Header .Header--top {
  position: fixed;
  width: 100%;
  font-weight: bold;
  transition: .3s;
  // header shrinks when .small added to .Header
  &.small {
    height: 70px;
    box-shadow: 0 0 5px rgba(black, .2);
    // when Header.small also change page offset
    &~.offset {
      padding-top: 140px;
    }
    // when Header.small change logo pad & font size
    .header_logo {
      padding-top: 20px;
      font-size: 20px;
      text-shadow: none;
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="Header Header--top">
  <div class="Header-inner Header-inner--top" data-nc-group="top">
    <div data-nc-container="top-left">
      <a href="/" class="Header-branding" data-nc-element="branding" data-content-field="site-title">
        <img src="//static1.squarespace.com/static/5aa819f2aa49a1758e33b803/t/5aa85d9cec212dd645589158/1524261284838/?format=1500w" alt="Red Corp USA" class="Header-branding-logo">
      </a>
    </div>
    <div data-nc-container="top-center"></div>
    <div data-nc-container="top-right">
      <nav class="Header-nav Header-nav--primary" data-nc-element="primary-nav" data-content-field="navigation">
        <div class="Header-nav-inner">
          <a href="/about/" class="Header-nav-item" data-test="template-nav">About</a><a href="/commercial/" class="Header-nav-item" data-test="template-nav">Commercial</a><a href="/residential/" class="Header-nav-item" data-test="template-nav">Residential</a>
          <a href="/hospitality/" class="Header-nav-item" data-test="template-nav">Hospitality</a><a href="/projects/" class="Header-nav-item" data-test="template-nav">Projects</a><a href="/contact/" class="Header-nav-item" data-test="template-nav">Contact</a>
          <a
            href="tel:+1.301.785.2400" target="_blank" class="Header-nav-item">Call Now</a>
        </div>
      </nav>
    </div>
  </div>
</header>

If you want to see an example of what I'm trying to achieve, take a look at . You can find my current site at for reference.

I would greatly appreciate any assistance on this matter.

javascriptjqueryhtmlcss

Answer №1

Your JavaScript is correct, but you can simplify it by removing the anonymous function.

The issue lies in your CSS. The nested &.[class] syntax is specific to LESS, so ensure you are transpiling it correctly. Additionally, you should change .Header .Header--top to .Header.Header--top since these classes are on the same element in your HTML, not nested within each other.

Below is a revised example with minimal changes to your code and some Lorem Ipsum text to create a scrollbar effect. Keep in mind that this example may require further styling improvements:

function navbarScroll() {
  var y = window.scrollY;

  if (y > 10) {
    $('.Header').addClass('small');
  } else if (y < 10) {
    $('.Header').removeClass('small');
  }
}

$(document).scroll(navbarScroll);
.Header {
  width: 100%;
  position: fixed;
  z-index: 1000;
  border-bottom: solid 2px #d8341f;
}
/* Other CSS styles here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="Header Header--top">
  <div class="Header-inner Header-inner--top" data-nc-group="top">
      /* Your HTML content here */
  </header>
  
  /* More Lorem Ipsum text goes here */

Answer №2

Modify the design file

.NavigationBar .TopNav {
...
}

to: (no spaces)

.NavigationBar.TopNav {}

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

Vue Single Page Application - invoking methods across all components

I am currently developing a notification feature that can be triggered from any component. It utilizes a straightforward Vuetify v-snackbar. Within App.vue <router-view :key="$route.fullPath"></router-view> <v-snackbar :valu ...

javascriptvue.jsvue-router

Ways to adjust the size of div and its elements to fit the window dimensions

When resizing the window, the banner image shrinks while the header and header items remain the same size. However, there is an issue when the header takes up around 30% of the screen in phone view. Here is the CSS code I am using: .headerdiv{ width: ...

javascripthtmlcssflexbox

Can someone guide me on incorporating bluebird promises with request-extensible?

I'm interested in utilizing the bluebird library to create a promise-based asynchronous web client. Currently, I have been using the request-promise package for this purpose. To get started, I simply include the following lines of code at the beginnin ...

javascriptnode.jshttppromisebluebird

Endless [React Native] onFlatList onEndReached callback invoked

Attempting to create my debut app using ReactNative with Expo, I've hit a snag with FlatList. The components are making infinite calls even when I'm not at the end of the view. Another issue might be related; across multiple screens, the infinite ...

javascriptreactjsreact-nativereduxreact-native-flatlist

Using JavaScript, append a hidden input field in Yii2 and retrieve it from the controller

Seeking assistance as a newcomer to yii2. I'm looking for help in resolving an issue that has arisen. I'm attempting to add a hidden input field to my form using JavaScript (not linked to a model). Subsequently, when I submit the form, I want to ...

javascriptjqueryhtmlyii2yii2-advanced-app

Search for specific parameters in an array and retrieve them

I have been attempting to sift through an array of data retrieved from my API, but unfortunately, the data remains unfiltered. I suspect that it might be due to the way I implemented my method or perhaps my params are not being returned correctly. Below ar ...

javascriptreact-native

Is there a way to access an SD card by clicking on an HTML link using JavaScript?

UPDATE: I am seeking a way to embed an HTML file with JavaScript or jQuery that can directly access the contents of the SD card while being opened in a browser. Currently, I have posted code for accessing it through an activity, but I want to be able to d ...

javascriptandroidjqueryhtmlbrowser

Is it possible to display data on a webpage without using dynamic content, or do I need to rely on JavaScript

Imagine a scenario where I have a single-page website and I want to optimize the loading time by only displaying content below the fold when the user clicks on a link to access it. However, I don't want users with disabled JavaScript to miss out on th ...

javascriptajaxpageload

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Currently, I am testing Protractor with a small AngularJS application. Here is the test scenario: describe('Testing Protractor', function() { var draftList; it('should count the number of drafts', function() { browser.get(&ap ...

javascriptangularjsangularjs-resourceprotractor

Enhanced button effect: image shaded on hover

Can someone help me figure out how to make the button and image darker when hovered over? I tried something but it didn't work... Here is a demonstration: http://jsfiddle.net/h2o8w5y6/ <!--- example code snippet --> <div class="col-lg-4 ...

htmlcsstwitter-bootstrap

Tips for organizing the router.js file in VueJs

With my router.js file currently reaching around 500 lines, I’m looking for a better way to structure it. { path: "/", component: () => import("./../src/views/dashboard/Dashboard.vue"), meta: { auth ...

javascriptvue.jsvue-router

I am trying to move to a different page, but for some reason the router.navigate function is not functioning within the subscribe

//I am attempting to redirect to another page once the subscribe method is executed, however I am encountering issues with the router.navigate function within the subscribe method. //In an effort to address this issue, I have attempted to store the data r ...

javascriptnode.jsangularmongodbexpress

The RxJs Observer connected to a websocket only triggers for a single subscriber

Currently, I am encapsulating a websocket within an RxJS observable in the following manner: this.wsObserver = Observable.create(observer=>{ this.websocket.onmessage = (evt) => { console.info("ws.onmessage: " + evt); ...

javascripttypescriptrxjs

Does this extensive combination of pseudo classes hold true?

Here's the code snippet I am working with: .fontmenu .fontlist{ position: absolute; bottom:30px; display:none; } .fontbutton button:hover .fontmenu .fontlist{ display:block; } <div class="fontmenu"> ...

htmlcsscss-selectorshoverpseudo-class

When using Chart JS, is there a way to create a line graph without including any labels at all?

Currently, I am facing a challenge with my Chart JS line graph. It needs to pull data from a backend and display it on a webpage. However, the chart has close to 1000 points to plot, making it impossible for me to provide labels for each point on both the ...

javascriptreactjschart.js

Tips for avoiding accidental unit conversion in jQuery

Imagine having the following code: var $element = $('<div/>'); $element.css("margin-left", "2cm"); console.log($element.css("margin-left")); When tested in Chrome, it doesn't return anything, but Firefox shows "75.5833px". Any sugges ...

javascriptjquerycsscross-browserunit-conversion

Offering various language options on a website determined by the URL

I've been contemplating how to add multi-language support to my personal website, which I developed using ExpressJS and NodeJS with EJS as the template engine. Currently, the website is only available in English, but I want to add a German version as ...

javascripthtmlnode.jsexpressejs

"Key challenges arise when attempting to execute the node app.js script through the terminal due to various middleware compatibility

I'm a beginner with node.js and I've encountered an issue while trying to run my node app.js file after incorporating a new file named projects.js which contains the following JS code: exports.viewProject = function(req, res){ res.render(" ...

javascripthtmlnode.jsexpressterminal

Interact with dynamically created form using jQuery

I am utilizing a for loop to dynamically generate a form. {% for id in data %} <form id="add_to_cart_{{id}}" method="POST" action="{% url 'add_to_cart' %}"> {{id}} <button type="submit" id="product_id_{{id}}" value="{{id}}">A ...

jqueryajaxdjango

The back button fails to refresh the page on a website utilizing Ajax technology

Recently, I implemented AJAX on a client's website to introduce some smooth animations for page transitions. When navigating from the homepage of firedogcreative.com to the edit page, and then to one of the work pages, we see a history like this: fir ...

javascriptjqueryhtmlajax