I am currently having a hard time making it real. I am using a custom theme but there are no settings for the things i'm searching for. Now the header is transparent but not sticky. I want to make it sticky with a dark color and a little opacity with a bottom border and shadow. Moreover, i would also want to make it shrink. For the time i've spent i think editing the theme's files is my only solution so i need help for the code itself. Here's the site im testing on: https://www.dailylifehelper.com/home-2/

 .nav-class{position:fixed;} that will make navbar sticky 
  • Thanks for the fast reply! Now that it is sticky i have to add the shrink effect and a low opacity background. However, i wasnt able to deal with that – Borislav Nov 27 '19 at 16:30
  • add following in your js $(window).on("scroll", function() { if($(window).scrollTop() > 50) { $(".nav-class").addClass("active"); } else { $(".nav-class").removeClass("active"); } }); in your css .active{ background-color: rgba(255, 0, 0, 0.5); border-bottom:1px solid black; } – Manan Nov 27 '19 at 17:09
  • I couldnt make it work. I tried adding the js to several of my js files and also directly in the header. Can you be more specific? i think i might have messed up somewhere – Borislav Nov 27 '19 at 21:49
  • Can you please share code of js and css? – Manan Nov 28 '19 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.