Jump to content

Archived

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

ade55

SCROLL NAV - config

Recommended Posts

ade55
So here is what you do to get this working.
Buy the plugin
Look at all the documents you can.
Get a little bit dissapointed that Bestrag's website is down for a refresh.
Realise that the plugin does not do what you want without some major css love.
Post a question here
Get a little bit more dissapointed when you get no response in a week.
Reverse engineer the scroll nav site to extract the relevant CSS
Fiddle around a bit and get it working.

So all good, I've got my one page site running with an elevator type menu which slides out from the left hand side of the page, which is exactly what I wanted. It does not work that well on iPads but it's not really needed for them and its easy to switch it off. I've also learned some new skills ie lifting CSS. from a web page.

No idea what the SLA for developers is on the forum or even whether what I'm asking is beyond the scope of support here. But either way a one liner to tell me I'm asking too much would have been appreciated.

I'm not going to post the relevant CSS here without permission as I'm not sure of the legality of lifting code from a web site and republishing it!

Share this post


Link to post
Share on other sites
bestrag

Hello.

 

Sorry for late response. In case you're wondering what happened with us, please read this post

 
I'm happy that you managed by yourself.
 
Scroll Nav DMS is meant to be a starting point for your customization (in CSS). It comes with number of blueprint templates, with basic CSS style.
 
regards,
bestrag

bestrag.net

professional dms plugins 

 

Share this post


Link to post
Share on other sites
ade55

OK glad to have you back.

 

Can you point me in the right direction as to how to make the menu background transparent please?

 

Current CSS

 

.scrollnav.snav-left-blueprint {
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.9;
  
}
.scrollnav.snav-left-blueprint li {
  margin-bottom: 2px;
  width: 100px;
  text-align: center;
 
}
.scrollnav.snav-left-blueprint li:first-child {
  margin-top: 2px;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint {
  width: initial;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint .nav {
  margin-bottom: 0;
  ;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  transition: all .3s ease-in;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint .nav a span {
  min-width: 0;
  margin: 0;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint .nav:hover {
  margin-left: 0px;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  transition: all .3s ease-in;
 }
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint .nav:hover a.active .snav-icon-holder::after {
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  transition: all .3s ease-in;
  position: absolute;
  right: 0px;
  width: 0px;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li {
  width: 195px;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li:first-child {
  margin-top: 0;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li:last-child {
  margin-bottom: 0;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li .snav-icon-holder {
  float: right;
  font-size: 32px;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li a span {
  line-height: 1.3;
  font-size: 14px;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li a span.snav-title {
  font-weight: 700;
  font-size: 17px;
}
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li a.active .snav-icon-holder::after {
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  transition: all .3s ease-in;
  position: absolute;
  right: -30px;
  width: 30px;
  height: 36px;
  color: #147EBB;
  overflow: hidden;
  font-size: 27px;
}
 
 
#scroll-nav-fixeduskop9y .scrollnav .nav li a{background-color:rgba(255,255,255,0.3);!important}
 
section.section-scroll-nav-fixed .scrollnav.snav-left-blueprint li a{
  background-color:rgba(255,255,255,0.3);
  !important
}

Share this post


Link to post
Share on other sites
bestrag

Hello, ade55.

 

Transparent background can be accomplished through less/css.

You were on the right track, you just placed "!important" out of the property (after ";").

There is simpler way. This should help you:

 

.section-scroll-nav .scrollnav{background-color: transparent !important;} /* or, like in your case: {background-color: rgba(255,255,255,0.3) !important;} */
.section-scroll-nav .scrollnav .nav{background-color: transparent !important;}
.section-scroll-nav .scrollnav .nav li a{background-color: transparent !important;}

regards,

Bestrag


bestrag.net

professional dms plugins 

 

Share this post


Link to post
Share on other sites
ade55

made the css like this 

 

.section-scroll-nav .scrollnav {background-color: rgba(255,255,255,0.3) !important;} /* or, like in your case: {background-color: rgba(255,255,255,0.3) !important;} */
.section-scroll-nav .scrollnav .nav {background-color: rgba(255,255,255,0.3) !important;}
.section-scroll-nav .scrollnav .nav li a {background-color: rgba(255,255,255,0.3) !important;}
 
 
but im afraid its still not working
 

Share this post


Link to post
Share on other sites
bestrag

Hello.

Thanks fot the link.

 

When I checked Scroll Nav on your site with Inspect Element, I didn't noticed the code above in compiled css. It is not applied.

 

This code  works, just tested it again.

 

Check your less. This happens:

   - when you have error in your less code (like the lines that have "; !important" up in your code)

   - or you didn't flushed cache

 

regards,

Bestrag

 


bestrag.net

professional dms plugins 

 

Share this post


Link to post
Share on other sites

×