FishOnABicycle FishOnABicycle - 1 year ago 52
CSS Question

Difficulty toggling media query using Javascript

Link to site

I'm trying to format the menu on the above site, when it's in sticky mode (i.e. scrolled down), because at certain widths the Request a Quote button is obscured by the screen. I'm using Javascript to action the change only when the screen is scrolled down, and an additional CSS class to move the menu. Unfortunately it's not working - while I can move the menu using just CSS applied directly to the existing class, trying to tie this in with JS to make it scroll specific doesn't any effect.

Is anyone able to tell me where I'm going wrong please?

Thank you in advance.


<script type="text/javascript">
$ = jQuery;
$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 20) {
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");

} else {
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");


/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header & Footer')----- */
@media screen and (min-width: 980px) and (max-width: 1189px) {
.stickyheader-midscreen-cta-fix {
margin: 40px 22% 0 0;
float: right;

Answer Source

The problem is at line 6:

$(window).scroll(function() {

(did not actually call the function on scroll)


$(window).on('scroll', function() {

For your design problem, you can decrease the width of the headers on certain screen sizes by adding the below code at the end of file: /wp-content/themes/customizr-child/style.css

@media screen 
and (max-width:1200px)
and (min-width: 980px) {
  .sticky-enabled .navbar-wrapper {
    margin-left: 0;
  .sticky-enabled .navbar-wrapper a {
    padding-right: 7px!important;
    padding-left: 7px!important;