Expandable menu items and background

Ferguson · March 11, 2016

A brief hunt in inspector didn't do much for me as it is hard to catch it in the act but...

When you have a horizontal menu with vertical dropdowns, which in turn have children, there is a small greater than symbol to indicate they are expandable. See the screen shot.

That greater than is occurring off the menu's background, where on many background photos is invisible. See the example snippet below.

Is this something I've caused? Is this normal? Anyone know if there is a way to pull that back onto the menu background easily?

In my brief search I didn't even see the ">" text at all, as it is dynamic. It's there, I can just work harder, but thought I would check first to see if this is an issue people already solved?

ChancyRat · March 11, 2016

I think I had that problem as well... my navbar CSS came from several experts here, and I am not entirely sure which part of this is critical, so here you go, some options to try.

And my best guess is that it's this that's relevant out of all the code below:

.sm-page-layout-region-top .yui3-menu-item.yui3-menu-has-children .yui3-menu-label {
padding-right: 35px !important;

/* ================================
   = ALL NAVBARs, TOP-LEVEL CODE  =
   ================================ */
/* Make each top level menu item have less top and bottom padding */
.sm-accordion>.sm-accordion-item .sm-accordion-item-label {
  line-height: 22px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Move the + and - buttons up so they properly align */
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion>.sm-accordion-item>.sm-accordion-item-action .sm-fonticon {
  top: -30px; !important;
}

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  font-family: 'Buda' !important;
  font-size: 16px !important;
  color: #000000 !important;
}

/* ==============================
   = ALL NAVBARs, SUB-MENU CODE  =
   ============================== */
/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background-color: #FFFFD7;
}

.yui3-menu-can-have-children > .yui3-menu-label:after {
    color: #255F9A !important;
    }

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background-color: #FFFFAC;
}

/* Change the border color */
.yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
  border-color: #A1CBDF;
}

/* Make each sub-menu item fade in/out as the mouse moves over it */
.yui3-menu-label {
  -webkit-transition:all 0.5s ease-in;
  -moz-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}

/* ==============================
   = TOP NAVBAR, SUB-MENU CODE  =
   ============================== */
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  font-family: 'Buda' !important;
  padding: 3px 5px 2px 5px !important;
  font-size: 14px !important;
  border: 1px solid rgba(161,203,223,0.9);
  border-bottom: 1px solid #A1CBDF !important;
  background-color: #FFFFE0 !important;
}

.sm-page-layout-region-top .yui3-menu-item.yui3-menu-has-children .yui3-menu-label {
    padding-right: 35px !important;
}
/* Set the background color of the sub-menu hover. For some reason there was a 1px gap, so I moved the margin up a bit and it fixed it. */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label:hover {
  background-color: #FFFF96 !important;
  margin-top: -1px;
}

Expandable menu items and background

Comments