CODEWITHSUNDEEP
javascriptjquerycss
FishOnABicycle
FishOnABicycle

Reputation: 67

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.

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

Upvotes: 1

Views: 65

Answers (3)

FishOnABicycle
FishOnABicycle

Reputation: 67

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

Upvotes: 1

Marian07
Marian07

Reputation: 2582

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

Upvotes: 0

Nitya Kumar
Nitya Kumar

Reputation: 968

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");

Upvotes: 0

Related Questions