Options

Aaron - Screwed up my CSS for the top navbar :(

ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
edited November 18, 2013 in SmugMug Customization
Aaron, I am so sorry to bother you for what is my own mess-making. But - would you be so kind as to fix this? You helped me get it straightened to start with. The navbar was perfect. Now I have no idea why I lost it and I'm trying not to "lose it" in my brain right now. :crazy:bash

The submenu links should be a color I define (not the grey default as the image shows).
The rows/line should be closer together
I need the font of the submenu a bit smaller
The code you gave me gave an additional color and hover color fade in effect over submenu items.

This is the code I have in the CSS - note some of it is the left sidebar (home page only), which I include here in case that is causing the problem.
/* Add some space above and below each submenu link.
   Also cause line-wrapping to indent after the 1st line */
.sm-page-layout-region-left .sm-nav-item-sublevel {
  padding-top: 3px;
  padding-bottom: 3px;
  text-indent: -20px;
  padding-left: 20px;
}
/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-page-layout-region-left .sm-nav-item-sublevel a {
  line-height: 25px !important;
}
/* Make the navbar have a hover color when the mouse goes over it */
/* Feel free to delete this if you don't like having hover color */
.sm-page-layout-region-left .sm-nav-item-toplevel a:hover, 
.sm-page-layout-region-left .sm-nav-item > a:hover {
  color: #19467D !important;
/*   font-weight: bold; */
}
/* Make each top level menu item have less top and bottom padding */
.sm-accordion>.sm-accordion-item .sm-accordion-item-label {
  line-height: 20px !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: -50px; !important;
}
/* Transition the links so they fade in and out */
a { 
  -webkit-transition:color 0.25s ease-in;
  -moz-transition:color 0.25s ease-in;
  transition:color 0.2s ease-in;
}
/* Set the buttons to transition to the hover color slowly */
.sm-user-ui .sm-button-skin-accent, 
.sm-user-ui .sm-button,
.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,
.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}
/* Transition the links under the photo */
.sm-button .sm-fonticon-small, 
.sm-user-ui .sm-button-label,
.sm-fonticon {
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2 ease-in;
}
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  background-color: #FEF9DC !important;
  padding: 5px 15px 4px 9px !important;
  font-size: 12px;
  border: 1px solid rgba(242,208,152,0.9);
  border-bottom: 1px solid #1F272A !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: 14px !important;
  color: #2E3035 !important;
}
/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background: #FBFADF;
}

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

/* 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: #00000;
}
 
/* when a user hovers over a link instead of it instantly going to the hover decoration, it will fade in and out to it */
a { 
  -webkit-transition:color 1.0s ease-in;
  -moz-transition:color 1.0s ease-in;
  transition:color 1.0s ease-in;
}
/* 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;
} 

Thank you kindly.

Comments

  • Options
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 15, 2013
    Aaron, I should add that I went back to all the original threads with the original code and tried to reconstruct the proper code. I may have made the mess worse. I just want you to know I worked hard to fix this myself.
  • Options
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited November 18, 2013
    Bump to anyone, please if possible - I've tweaked the CSS a dozen ways to Sunday and cannot bring back the nice formatting. I can't unveil with this ugly grey and a mile between the links.
Sign In or Register to comment.