Linking to other sections of page with fixed Nav Bar/Header

Whatever section you link to on the page, your position would start there but not accounting the space the fixed Nav bar takes up (its height) since its z-index is greater. What should be shown on screen is covered by the Nav bar, so you start at a section below the area where you would want to.

Fix: add another <div> element right above the section where you want to go to. Set CSS properties to:

position: relative;     //position the <div> relative to its current position (itself)
top: -140px;             //represents the height of the Nav bar to account for its space it takes up

Original position remains in the flow of the document, just like the static value.

Positioning definitions: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Comments

Post a Comment

Popular posts from this blog

Code Wars: Data Reverse (6 kyu)

Link to code challenge Code efficiency: Loops through string once (from the end) and with one new variable. String splicing- consider its efficiency? Try not to manipulate data when looping for efficiency. function dataReverse(data) { let arr = []; while (data.length) { arr.push(...data.splice(data.length - 8, data.length)); } return arr; }
Read more

Code Wars: longest_palindrome (6 kyu)

Link to code challenge Find the length of the longest substring in the given string s that is the same in reverse. As an example, if the input was “I like racecars that go fast”, the substring (racecar) length would be 7. If the length of the input string is 0, the return value must be 0. //Loop thru string and find longest substring that is also a palindrome //Efficiency- start with longest length first (each "outer" loop still looping to shorter //strings but done prior to "inner" loops which have longer strings- can be more efficient?) longestPalindrome=function(s){ if (s === "") return 0; else if (s.length === 1) return 1; let mainPointer = s.length; let subPointer = 0; let largest = 0; while (subPointer = 0) { //refactored- instead of pushing to new array let newString = s.slice(subPointer, mainPointer); //can this be refactored by comparing the two endpoints of the string but longer code? if ( newStr...
Read more

Code Wars: Find the odd int

https://www.codewars.com/kata/54da5a58ea159efa38000836/train/javascript Given an array, find the int that appears an odd number of times. There will always be only one integer that appears an odd number of times. function findOdd(A) {   let arr = A.sort((a,b) => a - b);   let counter = 1;     if (arr.length === 1) return arr[0];     for (let i = 0; i < arr.length - 1; i++) {         if (arr[i] === arr[i + 1]) {       counter++;     }     else if (arr[i] !== arr[i + 1]) {             if (counter % 2 !== 0) {         return arr[i];       }       // if it turns out to be last number in array with a count of 1 (since for loop doesnt get to it)       else if (i + 1 === arr.length - 1) {         return arr[i + 1];       }       count...
Read more