Jump to content


re-styling navable - removing shadows, etc.

  • Please log in to reply
No replies to this topic

#1 adesouza


    Advanced Member

  • Members
  • 51 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 19 April 2013 - 04:34 PM

Hi Again,


So I'm trying to strip the navable menu down to just text and flat color, no gradients or shadows. I can't seem to find anymore shadows or gradients in the navable style.less or the compiled result, so I guess its inheriting the box-shadow, from elsewhere... the pagelines core? I know you're not in the business of helping people tweak there CSS but if you know offhand what direction to point me in, it would be much appreciated :)



the compiled CSS shows this: -I'm just not clear where all the box-shadow stuff is coming from as I have removed all of them from the navable style.less 



#ba-navable .main-nav li.current-menu-item,
#ba-navable .main-nav li:active,
.ba-navable-menu li.current-menu-item,
.ba-navable-menu li:active {
  -webkit-box-shadow: inset 6px 0 6px -6px rgba(0,0,0,0.1),inset -6px 0 6px -6px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 6px 0 6px -6px rgba(0,0,0,0.1),inset -6px 0 6px -6px rgba(0,0,0,0.1);
  box-shadow: inset 6px 0 6px -6px rgba(0,0,0,0.1),inset -6px 0 6px -6px rgba(0,0,0,0.1);
  background-color: #f6f6f6;
  background-image: -moz-linear-gradient(top,#fafafa,#f0f0f0);
  background-image: -ms-linear-gradient(top,#fafafa,#f0f0f0);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fafafa),to(#f0f0f0));
  background-image: -webkit-linear-gradient(top,#fafafa,#f0f0f0);
  background-image: -o-linear-gradient(top,#fafafa,#f0f0f0);
  background-image: linear-gradient(top,#fafafa,#f0f0f0);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f0f0f0', GradientType=0);
#ba-navable .main-nav li.current-menu-item a,
#ba-navable .main-nav li:active a,
.ba-navable-menu li.current-menu-item a,
.ba-navable-menu li:active a {
  color: rgba(26,7,26,0.85);
#ba-navable .main-nav li:first-child.current-menu-item,
#ba-navable .main-nav li:first-child:hover,
.ba-navable-menu li:first-child.current-menu-item,
.ba-navable-menu li:first-child:hover {
  -webkit-box-shadow: inset -6px 0 6px -6px rgba(0,0,0,0.1);
  -moz-box-shadow: inset -6px 0 6px -6px rgba(0,0,0,0.1);
  box-shadow: inset -6px 0 6px -6px rgba(0,0,0,0.1);
#ba-navable .main-nav .sub-menu,
.ba-navable-menu .sub-menu {
  z-index: 99;
  position: absolute;
  top: -99999px;
  left: 0;
  float: left;
  width: 160px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -ms-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
  margin: 0;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);



Also tagged with one or more of these keywords: Navable