Difficulty toggling media query using Javascript

Question

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.

Javascript

<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) {
            $(".header-widget").addClass("header-widget-shortheader");
            $(".second-header-widget").addClass("second-header-widget-shortheader");
            $(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");

        } else {
            $(".header-widget").removeClass("header-widget-shortheader");
            $(".second-header-widget").removeClass(".second-header-widget-shortheader");
            $(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
        }
    });
});
</script>

CSS

/* -----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;
}
}

FishOnABicycle · Accepted Answer · 2016-08-24 14:01:44Z

1

Thanks to Marian07 for the support. This is where I ended up:

/* -----Fixes menu CTA button being cut off by mid size screens----- */

@media screen and (min-width: 980px) and (max-width:1084px) {
.sticky-enabled .navbar-wrapper {
    margin-left: 0;
  }  
.sticky-enabled .navbar-wrapper a {
    padding-right: 9px!important;
    padding-left: 8px!important;
    font-size: 95% !important;
  }
}
@media screen and (min-width: 1085px) and (max-width:1200px) {
  .sticky-enabled .navbar-wrapper {
    margin-left: 0;
  }  
  .sticky-enabled .navbar-wrapper a {
    padding-right: 3px!important;
    padding-left: 25px!important;
  }
}

answered Aug 24, 2016 at 14:01

FishOnABicycle

671 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marian07 · Accepted Answer · 2016-08-24 13:19:02Z

0

The problem is at line 6:

$(window).scroll(function() {

(did not actually call the function on scroll)

Solution:

$(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;
  }
}

edited Aug 24, 2016 at 13:19

answered Aug 24, 2016 at 11:55

Marian07

2,6306 gold badges30 silver badges54 bronze badges

8 Comments

FishOnABicycle Over a year ago

That didn't work either, I'm afraid. I should add that the script works for toggling the header-widget-shortheader and second-header-widget-shortheader classes. I wonder whether line 5 var header = $(".header-widget"); might be the problem because the one class change that doesn't work is .navbar .nav, if that makes sense?

Marian07 Over a year ago

@FishOnABicycle open your developer console(F2) and add the 'debugger' in your code. youtube.com/watch?v=b9KifHCZ0QM w3schools.com/js/js_debugging.asp

FishOnABicycle Over a year ago

Apologies, I'd turned it off yesterday and forgot to turn it on again before asking the question. It's now on again.

FishOnABicycle Over a year ago

Having started watching the video I now realise WP_DEBUG being on isn't what you meant. I'm looking at the video and trying to follow it but must confess I'm struggling a bit - any further help solving the issue would be gratefully received. Thanks.

FishOnABicycle Over a year ago

Marian, thank you - you've cracked it. Much appreciated - I'll post what I ended up with as a separate answer.

|

Prifulnath · Accepted Answer · 2016-08-24 12:00:39Z

0

remove . use only class name

$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");

replace

$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");

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

replace

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

edited Aug 24, 2016 at 12:00

Prifulnath

61913 silver badges38 bronze badges

answered Aug 24, 2016 at 11:38

Nitya Kumar

9688 silver badges14 bronze badges

1 Comment

FishOnABicycle Over a year ago

Thank you, that was part of the problem I can see, but even with that correction the menu is still not moving on scroll for 980-1189px screens?

Collectives™ on Stack Overflow

Difficulty toggling media query using Javascript

3 Answers 3

Comments

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related