Nav Bar Customization - how to make sublinks transparent?

Prismascape

Hi All,

I have a basic question I'm hoping I could get some help on. I am in the process of migrating to the new smugmug (still working in the sandbox) and I have a standard NavBar - with sublinks. I would like to make the sublinks transparent such that only the text appears as dropdown, not the box or the border around it.

So far I've figured out how to change the color of the boxes but not how to make them transparent.

Any help with CSS would be greatly appreciated! My site is www.prismascape.com

Thanks!

Allen

Prismascape wrote: »

Hi All,

I have a basic question I'm hoping I could get some help on. I am in the process of migrating to the new smugmug (still working in the sandbox) and I have a standard NavBar - with sublinks. I would like to make the sublinks transparent such that only the text appears as dropdown, not the box or the border around it.

So far I've figured out how to change the color of the boxes but not how to make them transparent.

Any help with CSS would be greatly appreciated! My site is www.prismascape.com

Thanks!

This is what I use in "entire site" CSS. Color 0 0 0 is black. 0.6 is transparency.
To make it really transparent go down to 0.5 ... 0.1 ... 0.01 ... 0.0001

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-children {
    background-color: rgba(0, 0, 0, 0.6);
 }

Prismascape

Thanks Allen! Appreciate the quick reply. I tried the code which seems to work partially - I notice that when I dial the alpha down, it turns into the default color of the theme...(in my case, it is set to grey). Is there a way to override the color setting on the theme? I tried cancelling the primary color in the Edit Theme box but then it just turns into black.

Allen

Prismascape wrote: »

Thanks Allen! Appreciate the quick reply. I tried the code which seems to work partially - I notice that when I dial the alpha down, it turns into the default color of the theme...(in my case, it is set to grey). Is there a way to override the color setting on the theme? I tried cancelling the primary color in the Edit Theme box but then it just turns into black.

When it's set to very transparent all you see is what is behind, what else would you like to see?

Prismascape

Hi Allen,

Attached is a screenshot of the nav bar...see how the top links are text only (with the homepage slideshow visible behind it)? I'm trying to get the sublinks to look like that (text only without showing the box). Hope I am able to explain properly.

Thanks again!

Allen

What CSS are you using? background-color: rgba(?, ?, ?, ?);
Did you try 0.0001 transparency? It should hide the box.

Might try
background: rgba(0, 0, 0, 0.0001);
or
.... 0.0001) !important;

Prismascape

The only CSS I have now is the following:


.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children {

background: rgba(0, 0, 0, 0.001) !important;

}

I used the Sierra template for the site design

Allen

Try this one also. One of them should work.

background-color: rgba(0, 0, 0, 0.001) !important;

You might check other menus like the size in lightbox, this "vertical" might affect those also.
If so might need to make this more specific to only affect this top menu.
.sm-user-ui.yui3-menu-vertical
Although on my site the effect was good for all vertical menus.
examples:
customize drop down
organizer drops