Navbar Customization - Questions

Speedr

I have a horizontal navbar, I've added 3 sub-menu items to one of the menu headings...so that it now drops down to show the other selections.


1. I want to add a white line under each sub-menu item. Can anyone tell me how this can be done with CSS?

2. Is it possible to have the sub menu items fade into view?

Smug Eric

Got a link?

snakeey11

I believe the following CSS will get you what you're looking for:

/* Bottom border for menu sub-items */

.sm-page-widget-nav .yui3-menu-item:not(:last-child) {
  border-bottom: 1px solid #fff;
}

/* Fade in submenu(s) */

.sm-page-widget-nav .yui3-menu,
.sm-page-widget-nav .yui3-menu-children {
   opacity: 0;
  
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.sm-page-widget-nav .yui3-menu-open,
.sm-page-widget-nav .yui3-menu-open > .yui3-menu-children {
   opacity: 1;
}

You can tweak the ".5s" in the transition properties to however long (or short) you'd like the fade in effect to last. Note that CSS transitions aren't supported in Internet Explorer versions before 10. You can read up a bit on CSS transitions here.

-Mike