Submenus help

mikebphillipson · September 2, 2016

Hi all,

ok.. so i've searched the threads and can't find quite the answer so here is the issue, and i think it's a simple one:

I've created a menu item 'Portfolio' with 4 submenus.. Now when i hover over the 'Portfolio' menu item the sub menus appear and all submenu links work.. BUT i can also click on the Portfolio link which takes me to the page with the all the galleries on it..

What i want to do is disable the portfolio link to the page with the 4 galleries so users can only select the submenu items.. (i actually managed this at one point but can't replicate)

i've organised my galleries within a folder called Public Images, maybe thats the issue..

hope i've been clear.. any help very much appreciated..

Regards,

Mike

Allen · September 2, 2016

Try leaving the portfolio link blank.

owilliams · September 7, 2016

Allen's got this one right. You will need to edit the "Portfolio" button to point to a "Custom URL" and then leave the custom url field blank. With that, it will be a dead button but the sub-menus will work just fine.

The catch is that if you are using the automatic sub-menus option, this will also break those as the site will not see them under the blank custom URL. What you would need to do to correct this is to manually go in and drop the sub-menu buttons in for the galleries and set those to "Page I choose" with the gallery selected.

Best,
-Oliver
SM Support

SpartanPics · September 21, 2016

I am new here so this is my first post. I see some great SmugMug support folks on here who have been very helpful to the new site I have going.

Here is my challenge to anyone able to help. Please look at our SpartanPics.com site. It is for a High School and we are just in the middle of migrating the past 10 years of sports and events pics from an old Picasa site to Smugmug. What I don't like is the drop down menu for each sport. It is white with a very light grey highlight almost not discernible. Does anyone have any tricks to make the drop down menus appear with any flair? I would love it to be a clean color drop down with another color highlight. School colors are green, Gold, Black and Whitee. Any suggestions on what would look good and the applicable .CSS that could be used? I have never applied custom CSS to this site but I'm willing to try. I have done the best I can on this site with my limited skills. Thanks all!

Lille Ulven · September 22, 2016

Hi SpartanPics

there are actually two ways of accomplishing a changed color on hover for your menu:
1. Customize->Content and Design -> Hover over your Menu and click on the Wrench-Tool in the Basic Tab there is a menu entry for Hover color, which you can change. If this does not deliver a color that would work for your site, yes you can do it by CSS as well (see point 2)
2. Customize -> Content and Design -> Mark "Entire Page" in the menu on the right and add a CSS Content block from the Content-Tab in the menu on the right (pretty much in the bottom, behind HTML & CSS, take the "pure" CSS one). Add this code to the new CSS block:

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
  color: red !important; /*red for the active link as "base color"*/
}


/* Make the menu nav bar hover text for the active page a different color */
.sm-page-widget-nav-activepage > a:hover {
  color: #f2ef35 !important; /*bright yellow for the active link on hover*/
}

/* ************************************************************ */
/* Topmenu Hover color */
/* ************************************************************ */

li.sm-page-widget-nav-toplink:hover {
  background-color: black !important; /* would change the color of your field to black when hovering over */
  color: #496486 !important; /*blue text color*/
  /* No inner distance=no padding*/
  /* Define Frame */
  border: 10px black solid !important;
  border-bottom: 0px !important;
  border-left: 0px !important;
  /* Define outer distance */
  margin: 10px black solid !important;
}

/* When hovering over the menu the current entry gets a blue background
 * color and black writing
 * Idea: ShutterSpy here: http://dgrin.com/showthread.php?t=240466
 * Changed: background color from white to themes accent color
 */

 a { 
    -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in, background-color 0.2s ease-in;
    -ms-transition: color 0.2s ease-in, background-color 0.2s ease-in;  
    -o-transition: color 0.2s ease-in, background-color 0.2s ease-in; 
    transition: color 0.2s ease-in, background-color 0.2s ease-in;
}

.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children > .yui3-menu-item a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-horizontal .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-horizontal .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-horizontal a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-horizontal .yui3-menu-children > .yui3-menu-item a.yui3-menu-label:hover {
	background-color: #496486; /*color of background is a blue-tone & my themes accent color*/
	color: #000000; /*color of text is black*/
}

Of course you can change all color-entries to your liking by changing the value behind the "#" to something different. And a nice tool to find those color values can be found here: W3C color pickers[/b]

Good luck

Lille Ulven

Submenus help

Comments