Jump to content
Sign in to follow this  

re-styling navable - removing shadows, etc.

Recommended Posts


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 their 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);

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • imagineutopia
      By imagineutopia
      I have a client who wants a tight subnav up top.
      I am using hero nav and want to use navable as my sub menu.
      it looks pretty good but I know they will complain about the shadow and gradient.
      I'm going to try and make it be totally white and push it down near the curve a little tighter.
      is this possible though css? I basically just want it to be transparent. 
      Top is how it currently is and below is ideally how I'd like it to be.

    • KristaD
      By KristaD
      Hi there, I'm working on: http://kristardesign.com/genaleenolin/wordpress/
      The client wants the nav bar tabs to be blue when viewing that page. So if you click on Thyroid Sexy from the HOME page, the tab will look blue, not the default gray. I tried Firebug and can't figure it out. Thanks!
    • thebastion
      By thebastion
      Hi there,
      I bought the Navable section today, but have since discovered CrackBar which would appear to be exactly what I was after in the first place.
      They are both created and sold by Nick Haskins, would it be possible to exchange?  Navbar really isn't customisable enough for what I need.
      Many thanks
    • innovot
      By innovot
      A nice feature would be able to center the menu within the bar.  Is that possible please ?
    • innovot
      By innovot
      Have just purchased Navable but when adding to the site and changing the base colour and text nothing happens.  I have refreshed multiple times and published but it stays the default grey.  What am I doing wrong ?
      No rhyme or reason why but it has started worked :)