Jump to content

Can someone help me change navbar when active/scolling - Important

Recommended Posts

i`m trying to change my nav bar when its active or on scroll - its using the same color as the top section - but this worked before - but for some reason its not working any more, anyone that can help me out? kind of important

//Pulse color when active nav
.shrink .header-nav-wrapper a::after {
  display: block;
  content: ' ';
  background: #44414e;
  height: 1px; 
  width: 0;
  margin-top: -2px !important;
  transition: width 300ms; 
  margin-right: auto;}

 .shrink .header-nav-wrapper a:hover::after {
  width: 100%;}

.shrink .header-nav-wrapper a--active a {
  background-image: gradient !important;}


// header and footer
#header .shrink {
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.39);
	box-shadow: 0px 10px 40px 0px rgba(47,47,47,.1);
	background-color: #fff!important;}

#header .shrink a#site-title {
	color: #44414e!important;}

#header .shrink .header-actions .btn {
  background: #5333ed !important;
  border: 2px solid #5333ed !important;
  color: #FFF !important;}

#header .shrink .header-actions .btn:hover {
  background: none !important;
  border: 2px solid #5333ed !important;
  color: #5333ed !important;}
  
#header .shrink .header-nav-wrapper a {
	color: #44414e!important;}


#header .shrink .burger-box {
	filter: invert(1);}

 

Link to comment
  • Replies 3
  • Views 328
  • Created
  • Last Reply
  • 2 weeks later...
21 hours ago, ChristopherBerman said:

Hey - sorry late response : website url : elevated.no  

 

password: berman123

Edit this code

#header .shrink {
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.39);
	box-shadow: 0px 10px 40px 0px rgba(47,47,47,.1);
	background-color: #fff!important;}

#header .shrink a#site-title {
	color: #44414e!important;}

#header .shrink .header-actions .btn {
  background: #5333ed !important;
  border: 2px solid #5333ed !important;
  color: #FFF !important;}

#header .shrink .header-actions .btn:hover {
  background: none !important;
  border: 2px solid #5333ed !important;
  color: #5333ed !important;}
  
#header .shrink .header-nav-wrapper a {
	color: #44414e!important;}


#header .shrink .burger-box {
	filter: invert(1);}

to this

.shrink {
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.39);
	box-shadow: 0px 10px 40px 0px rgba(47,47,47,.1);
	background-color: #fff!important;}

.shrink a#site-title {
	color: #44414e!important;}

.shrink .header-actions .btn {
  background: #5333ed !important;
  border: 2px solid #5333ed !important;
  color: #FFF !important;}

.shrink .header-actions .btn:hover {
  background: none !important;
  border: 2px solid #5333ed !important;
  color: #5333ed !important;}
  
.shrink .header-nav-wrapper a {
	color: #44414e!important;}
.shrink .burger-box {
	filter: invert(1);}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.