Some navbars trouble.

Dudamel

I'm polishing some details to my website now ( dudamel.smugmug.com )

I have two problems:

The major one:
1) Want to make the submenu background, transparent on hover. I managed to make it transparent, but when i hover on it, it shows a solid color. I used several codes found here, and it does change the color, but whenever i use "none" or "transparent", it does nothing. Even transparency 0.1 works, but this gets the whole text transparent.
What can i do?

2) The other thing is related to menu bar as well. I managed to make the "current page" to be highlighted with some accent and underline. But it only do it for the links that are related to a gallery (portfolio, viajes).
The ones that redirect to a page, wont highlight.

I used this one for that:

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#505050;

Should i add anything to make the "pages" menu highlighted too?

Thanks in advance.

Hikin' Mike

This should make your backgrounds transparent when hovered:

.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover, 
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .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 > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover {
    background: none;
    }

This is for the active links:

/**
* Active Link Color
******************************************/ 
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    color: #f00;
    }       

Allen

@Hikin' Mike said:
This should make your backgrounds transparent when hovered:

...

Does this affect all the menus? Like the "Sizes" menu in lightbox. I found I had to be careful because
some generic code can affect things all over the place.

Hikin' Mike

@Allen said:

@Hikin' Mike said:
This should make your backgrounds transparent when hovered:

...

Does this affect all the menus? Like the "Sizes" menu in lightbox. I found I had to be careful because
some generic code can affect things all over the place.

I honestly don't know. I just used Firebug to try and make his sub-menus. I didn't even think/look elsewhere. I know you can be more selected by including the widget number. I do that on my site because I have "live tutorials" and I don't want to put my site's CSS on some of the tutorial stuff.

Dudamel

Thanks! It worked for the sub-menus transparency.
It affects indeed the "sizes" menu in lightbox. But i think i can live with it.

The one that didn't work was the "active link".
It just highlights some pages and some won't show active.
Would it be related to some pages being galleries and some pages being just "pages"?

You can take a look at my site to see what i'm talking about.

Thanks again :)

Hikin' Mike

It shouldn't matter. I have a testing Folder called "Test". Inside I have one test page and 5 testing galleries. When I click on each (page and gallery), the top nav (Test) shows a different color as well as that page/gallery in the drop-down (sub-menu).

Keep in mind that the active link color only shows two-deep. I think your menu structure is fine.

Dudamel

> @"Hikin' Mike" said:
> It shouldn't matter. I have a testing Folder called "Test". Inside I have one test page and 5 testing galleries. When I click on each (page and gallery), the top nav (Test) shows a different color as well as that page/gallery in the drop-down (sub-menu).
>
> Keep in mind that the active link color only shows two-deep. I think your menu structure is fine.

I don't know what am i doing wrong.
I just added a "test" gallery to the menu, just to see if it gets highlighted and it does.
Then i added a "test" page, and it won't highlight.

Any thoughts? Maybe i have some CSS lying around somewhere that overlaps/invalidate this?

Hikin' Mike

Looking at your menu go to Menu > Links > "Include Sub-Links". Set that to 'ON'.

Dudamel

@Hikin' Mike said:
Looking at your menu go to Menu > Links > "Include Sub-Links". Set that to 'ON'.

Did it. Only shows my sublinks when i hover on a parent link.
Won't highlight active page.

This is the whole code i have for the galleries:

/* Hide the gallery description text */
.sm-gallery-description {
  display: none;
}
/*Lightbox transparency*/
.sm-user-ui .yui3-widget-mask.sm-lightbox-mask {
   background: #c5dbf4;
  opacity: 0.4;
}
/* Hide the "Photo Sharing by SmugMug" Footer Text */
.sm-page-powered-by {
    overflow:hidden;
    height:0;  
}
/*vertical submenu*/
.sm-gallery-cover-title, .sm-gallery-cover-description {display: none;}
.yui3-menu-item > .yui3-menu-label {
    padding: 2px 15px 2px 2px;
    }
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu,
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children {
    background-color: none;
    background-color: rgba(10, 10, 10, 0.0);
    border-style: none;
    box-shadow: none;
}
.sm-user-ui .yui3-menu-item {
  display: inline-block;
  }

/*no background vertical submenu*/
.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover, 
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .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 > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover {
    background: none;
    }
/**
* Active Link Color
******************************************/ 
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    color: #458fe2;
    text-decoration: underline;
    }

Hikin' Mike

If the code you copy/pasted is true, then you have some errors. You had several unclosed comments /* */. You missed some of the *. Copy this instead:

/* Hide the gallery description text */
.sm-gallery-description {
    display: none;
    }
/*Lightbox transparency*/
.sm-user-ui .yui3-widget-mask.sm-lightbox-mask {
    background: #c5dbf4;
    opacity: 0.4;
    }
/* Hide the "Photo Sharing by SmugMug" Footer Text */
.sm-page-powered-by {
    overflow:hidden;
    height:0;
    }
/*vertical submenu*/
.sm-gallery-cover-title, .sm-gallery-cover-description {display: none;}
.yui3-menu-item > .yui3-menu-label {
    padding: 2px 15px 2px 2px;
    }
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu,
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children {
    background-color: none;
    background-color: rgba(10, 10, 10, 0.0);
    border-style: none;
    box-shadow: none;
    }
.sm-user-ui .yui3-menu-item {
    display: inline-block;
    }

/*no background vertical submenu*/
.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover, 
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .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 > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover, 
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover {
    background: none;
    }
/**
Active Link Color
******************************************/ 
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    color: #458fe2;
    text-decoration: underline;
    }

Dudamel

@Hikin' Mike said:
If the code you copy/pasted is true, then you have some errors. You had several unclosed comments /* */. You missed some of the *. Copy this instead:

Yes, my bad, i copy/pasted from the scratch on my notepad, it has all the comments correctly added.

The truth is, just won't highlight any active page that is not a gallery.
I guess i'm going to make all of the menu links as galleries, and then add content blocks for "bio", "blog", etc.

Hikin' Mike

@Dudamel said:
Yes, my bad, i copy/pasted from the scratch on my notepad, it has all the comments correctly added.

The truth is, just won't highlight any active page that is not a gallery.
I guess i'm going to make all of the menu links as galleries, and then add content blocks for "bio", "blog", etc.

Do both your 'Video' and 'Bio' have 'ON' on Menu > Links > "Include Sub-Links"? My Smugmug Customization tutorials are pages and they display the active page color..

Dudamel

@Hikin' Mike said:

@Dudamel said:
Yes, my bad, i copy/pasted from the scratch on my notepad, it has all the comments correctly added.

The truth is, just won't highlight any active page that is not a gallery.
I guess i'm going to make all of the menu links as galleries, and then add content blocks for "bio", "blog", etc.

Do both your 'Video' and 'Bio' have 'ON' on Menu > Links > "Include Sub-Links"? My Smugmug Customization tutorials are pages and they display the active page color..

No, they don't.
The only ones that show "include sub-links" are the galleries.

Hikin' Mike

I realized that after I posted.

Glad you posted the print screen. Since both of those links are in Smugmug, you don't need to use a 'Link To > Custom URL'. You go to 'Link To > Page/Gallery' ,or something like that, then find those pages. Once done, it will work.

Dudamel

@Hikin' Mike said:

I realized that after I posted.

Glad you posted the print screen. Since both of those links are in Smugmug, you don't need to use a 'Link To > Custom URL'. You go to 'Link To > Page/Gallery' ,or something like that, then find those pages. Once done, it will work.

HAHA.

As i thought, it was my mistake.

It worked now.

Thanks for the patience, Mike.
Really.

Hikin' Mike

I was racking my brain because it should have worked. I never thought to ask if you were using a custom URL instead of the "baked in" URL. We both learned something and glad it's finally working!