Targeting menu items on only one menu

camner

On my Homepage I have the typical "Browse"/"Home"/"Search" menu as well as a second menu below the folders and galleries on the page. The second menu is a horizontal bar menu with sublinks automatically generated to all of the contents of the items in the menu list.

I want to change the behavior of the second menu, without affecting the "Browse"/"Home"/"Search" menu, as follows:
1. Change the background color and font color of the menu items
2. Change the background color and font color of the menu items upon hover
3. Change the background color of the submenu items upon hover

I haven't been able to figure out how to do #1 or #2. For #3 I found this page: http://www.aaronmphotography.com/Customizations/Navbar/Change-Submenu-Colors

BUT, what I observed is that the code for #3 (see below) doesn't just target the second menu items but ALL the menu items (including the submenu I see when I hover over the link "Customize" when I'm logged in!).

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #00F;
}
(sorry for the formatting...I don't see to have access to Markdown for some reason)

I thought I might be able to target just my second menu by using the ID of the appropriate <div> container, but the ID seems to change whenever I make a change to the page, if I understand how the SM backend works.

Is this a hopeless cause, or is there a way to accomplish what I hope?

Thank you!

Allen

You will need to specify the individual widget class name for the one you're targeting.
They look like this and are unique for each widget.
.sm-page-widget-123456
example:
/* menu hover */
.sm-page-widget-123456 .sm-page-widget-nav-toplink a :hover,
.sm-page-widget-123456 .sm-page-widget-nav-toplink a:hover {
color: white;
}

Try right clicking menu and use "Inspect Element". Then look up from the highlighted line for that similar class name.
Looking up from my "Home" menu button. In below sm-page-widget-375144

<div id="sm-page-widget-jgK9pWR4" class="sm-page-widget sm-page-widget-nav  sm-page-widget-375144" data-typeid="375144">
   <div class="sm-page-widget-content"><div class="sm-page-widget-header"></div>
      <div id="sm-page-widget-DsRpjdHv" class="sm-page-widget-body">
         <div class="sm-page-widget-nav-popover sm-page-widget-n...  sm-page-widget-nav-sublinks-separator">
           <ul class="horizontal">
              <li class="sm-page-widget-nav-toplink"><a href="http://www.photosbyat.com">Home</a></li>
....

camner

Thanks, but the problem is that every time I open the Homepage (even if I haven't made any changes to the page), the (same) class changes! For example, when I opened the Homepage the first time my lower page menu had this code:
{div id="sm-page-widget-HqCSQbK6" class="sm-page-widget-body"}{div class="sm-page-widget-nav-popover sm-page-widget-nav-horizontal sm-page-widget-nav-color-default sm-page-widget-nav-hover-color-emphasized sm-page-widget-nav-m sm-page-widget-nav-left sm-page-widget-nav-toplinks-regular sm-page-widget-nav-sublinks-regular sm-page-widget-nav-sublinks-separator"}'

Then I opened the Homepage in a different browser tab (same browser) and got this:
{div id="sm-page-widget-dT3J2tFX" class="sm-page-widget-body"}{div class="sm-page-widget-nav-popover sm-page-widget-nav-horizontal sm-page-widget-nav-color-default sm-page-widget-nav-hover-color-emphasized sm-page-widget-nav-m sm-page-widget-nav-left sm-page-widget-nav-toplinks-regular sm-page-widget-nav-sublinks-regular sm-page-widget-nav-sublinks-separator"}

Note: I changed the greater than/less than symbols to braces because at my level of participation I am not allowed to use HTML tags and my code was stripped from the post!

I was on exactly the same part of the page when I chose "inspect" and found the parallel part of the code. EVerything is the same except the class name.

Am I missing something obvious?

Smug Eric

The div id is generated each time the page is opened. But if there is a unique class that should stay the same. So from Allen's chunk of code the div id="sm-page-widget-jgK9pWR4" would change at each viewing. But the class further down that first line sm-page-widget-375144 would not change, so that is what you would use. I do not see a class identifier like that in the code you copied. A link to the page you are working on might help as it might be a different portion of the code that has that class identifier.

camner

Just to make sure I understand, if an id is a mixture of letters and digits, such as "sm-page-widget-jgK9pWR4," then this is a temporary id that is generated upon each page load whereas an id consisting only of digits, such as "sm-page-widget-18841881," then this is a permanent unique id that will not change?

And what about an id such as "#menuItem-yui_3_8_0_1_1502751802502_434"...Is that a "permanent" id or one that changes with every page load?

Smug Eric

From what I have noticed anything with the mix of a standardized name then the hash of letters and numbers if it is in the code under the ID= section that will be temporary. But if it is a part of the class= section that should be a permanent identifier you can use. I'm half remembering there were cases where that was not true but those were rare and I'm not remembering any specific ones so it might just be old-timers kicking in.

Hikin' Mike

@camner said:
Just to make sure I understand, if an id is a mixture of letters and digits, such as "sm-page-widget-jgK9pWR4," then this is a temporary id that is generated upon each page load whereas an id consisting only of digits, such as "sm-page-widget-18841881," then this is a permanent unique id that will not change?

And what about an id such as "#menuItem-yui_3_8_0_1_1502751802502_434"...Is that a "permanent" id or one that changes with every page load?

Correct, a permanent id will look like that: .sm-page-widget-12345678.

You can also target a page, but it will look different: .sm-page-node-3dSnCv. It can have lower case, upper case and numerals, but 6 characters.

camner

Thanks! This helps a lot.