Navigation overlaps main text

Problem:

Left hand navigation moves and overlaps main text when scrolling down the page

/www/sites/all/themes/corp_base/assets/js/site/modules/event-listeners/stickables/helpers.js

this file contains an extremely large object which is focusing on the following classes: 'header-wrapper'( HEADER WRAPPER), 'accordion__title' (ACCORDION SHOWHIDE), 'horizontal-slider' (HORIZONTAL SLIDER) and 'list-highlight' (LIST HIGHLIGHT) . The classes are the 'stick-able objects /items'. which contain three functions? for each.

They all have three actions:

• decideAction
• stick
• unstick

there is a key that label's the components of the element . In order to fix this problem I must make sure that once the nav bar scroll to a certain point, the width of the nav doesn't extend.

The styling can be edited in this file:

www/sites/all/themes/corp_base/assets/css/site/includes/_include-list-highlight.scss

Identify areas to learn:

• JavaScript Coordinates coordinates
• HTMLCollection html collections
• Javascript Objects
• if/ conditional statements
• jQuery scrollTop / method & API jQuery docs
• window.addEventListener('scroll', function)...
• Programming logic

Learn/ Practice:

jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
//this variable keeps track of where the scrolling bar sits - top offset how far in pixels from the top of the 
page does the navigation bar sit

jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
//this will return how far we've scrolled down from the top of the page 
jQuery(".status").html (scrollPos);

if(scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");

} else {
jQuery ("nav").removeClass ("fixed");
}
});

Implement:

these classes are added when it sticks (and are causing the problem). the first needs to be removed.

.wt-grid-center 
.wt-grid-section-center

that didn't work so I added this variable in this file:

/www/sites/all/themes/corp_base/assets/css/site/includes/_grid.scss

$grid-center-width-xxs: 220px;

this variable is being used in the class .wt-grid-center

This also didn't work. I didn't realise that this class was effecting the GRID!! AHHH !! so had to undo that. I ended up deleting both of the classes again. Now there is a problem with the responsiveness of the page so I will have to deal with this.

my plan is to: change the scroll position where it becomes Sticky. also to change the styling so that it is responsive ( so adjust the padding or margins across different breakpoints).