mathias Posted August 7, 2015 Share Posted August 7, 2015 I've been trying to get my navigation to stick to the top once it reaches that position. I tried using this solution for a Five template but have had no luck in doing so. this is where I am: header: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> footer code: <script> var headerheight = 50; // number of pixels to scroll before applying classes $(window).bind('scroll', function () { if ($(window).scrollTop() > headerheight) { $('#navblock-bottom').addClass('sticky-nav'); $('#content-wrapper').addClass('sticky-nav-gap'); } else { $('navblock-bottom').removeClass('sticky-nav'); $('#content-wrapper').removeClass('sticky-nav-gap'); } }); </script> CSS: .sticky-nav #navblock { position: fixed; top: 0; z-index: 99; } .sticky-nav-gap { padding-top: 20px; // height of the navigation } Haven't managed to make it work. Any help is very appreciated. Oh and this is the site i'm working on Link to comment
alxfyv Posted November 5, 2015 Share Posted November 5, 2015 Copy and paste into Design > Custom CSS: /* make nav sticky */#header { position: fixed; margin-top: -125px; z-index: 9999; background-color: #000;}#page { margin-top: 125px;} That should be it. :-) I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward. Link to comment
Guest Posted November 11, 2015 Share Posted November 11, 2015 I spent some time trying to figure it out too and I finally managed to make it work.I am pretty new at this whole css and javascript thing.. so bare with me. for my website which you can find (if it's still up) here I pop these into my Custom css: #navBlock.fixed{ width: 100%; position: fixed; display: block; background-color: #ffffff; //prevent overlapping top: 0; left: 0; z-index: 9999; //also prevent overlapping } On the footer code injection side of things: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).on('scroll',function(){ if ($(document).scrollTop() > 243) { $('#navBlock').addClass('fixed') } else { $('#navBlock').removeClass('fixed') } }); </script> Hope it helps.. i only wrote this because I would love to have found it when i was searching. Link to comment
Guest Posted February 23, 2016 Share Posted February 23, 2016 This made all my text go behind my header image and nav bar, which do now stay stationary but now there's a whole other formatting issue of getting the text of the body of the page to begin below the nav bar/header. Link to comment
VernaMScott Posted February 23, 2016 Share Posted February 23, 2016 I earn 25 dollars every 30 minutes. Work for just few hours and have longer time with friends and family. for more details check the link below www.pay-buzz.com Link to comment
Guest Posted April 27, 2017 Share Posted April 27, 2017 I'm trying to do the same to a custom navigation. Can you assist? Link to comment
dm850906 Posted September 9, 2017 Share Posted September 9, 2017 THANK YOU! Any chance you could help me figure out how to make my footer background the full width of the browser, so that it matches the Nav background? www.lakewoodplantcompany.com Link to comment
laurajeanlevin Posted February 17, 2018 Share Posted February 17, 2018 Were you ever able to resolve this? I am having a similar issue now Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.