Figured out transparent Nav

RichmondImage · August 13, 2013

I know I was blowing up this board for the last few days asking around about how to make my dropdown nav transparent, but after MANY hours of trial and error I finally got something that works. Now this doesnt actually make the NAV transparent but it seems like the Nav flyover widget inherits a lot of properties from the main site css so here is how i got around it.

.sm-user-ui {
  background-color: rgba(0, 0, 0, .5);
}

then to remove the borders around the individual labels

.yui3-menu-item>.yui3-menu-label {
  border: hidden;
}

I inserted this in a CSS content block on the entire page section, simply because I have a number of pages that are custom from the default theme.

richmondimage.net to have a look

WiscoFrank · August 13, 2013

Nice. I'll give this a try.

TerryRLowe · August 14, 2013

Didn't work on mine. Do I need to select a particular text color or anything from the menu editor?

Terrylowe.com

TerryRLowe · August 14, 2013

By the way. I don't know a thing about CSS. I simply cut and pasted your code in. Was I supposed to do anything else?

RichmondImage · August 14, 2013

Where did you put it? And do you have a site I can look at to assist?

electrolyte · August 14, 2013

Hi James

It doesn't work for me either. I copied both bits of CSS and put into my sitewide CSS box (in customise site > whole site > theme > "modified" (what I called my modded theme) advanced > custom CSS). Your code made the dropdowns more grey and made the borders whiter.

I've removed the code.

I am no CSS expert but is there a stray > in your second bit of code?

TerryRLowe · August 14, 2013

My site is terrylowe.com.

I placed the code under "entire site" within my CSS app placeholder. It is the only code I have there

RichmondImage · August 14, 2013

I am honestly miffed. That is the only code that I use and I put it in a css holder on the header of the entire site and another on my homepage since it is set as different. One note... I do not have any colors set on my theme, specifically the primary color might interfere. I have gone through a number of iterations of this code including the following, but they do not appear on my site anymore. See if any of these either alone or together might help.

.sm-user-ui .sm-accordion>.sm-accordion-item>.sm-accordion-children>.sm-accordion-item {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.01);
}

.sm-user-ui.sm-page-widget-nav-popover a {
  background-color: transparent;
  opacity: .1;
}

.sm-user-ui .sm-dropdown {
  background: transparent;
  border-color: hidden;
}

RichmondImage · August 14, 2013

I will tell you this, a lot of the stuff that I do, I just play with for as long as it takes to get what I want... I don't have a traditional understanding of CSS

southeasternphotography · August 14, 2013

RichmondImage, Can you put your website into your DGRIN profile where we can click on your name and then on your website? Thanks!

basflt · August 18, 2013

why dont you try this

.yui3-menu > .yui3-menu-children {
    position: absolute;
}

.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.2);
}

works for me
i had in theme CSS at first , but that did not work
but now in entire site CSS it work fine

note
position is relative by default

markmicallef · August 18, 2013

basflt wrote: »
why dont you try this
.yui3-menu > .yui3-menu-children {
    position: absolute;
}

.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.2);
}
works for me
i had in theme CSS at first , but that did not work
but now in entire site CSS it work fine

note
position is relative by default

The first didn't work for me but this one did Thanks basflt

Allen · August 18, 2013

basflt wrote: »
why dont you try this
[COLOR=Red].yui3-menu > .yui3-menu-children {
    position: absolute;
}[/COLOR]

.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.2);
}
works for me
i had in theme CSS at first , but that did not work
but now in entire site CSS it work fine note position is relative by default

The absolute position in this is messing up the size popup menu in lightbox.

.yui3-menu > .yui3-menu-children {
    position: absolute;
}

With it I only get the "small", see top image. Removing it I get the correct bottom image.

Allen · August 18, 2013

Allen wrote: »
The absolute position in this is messing up the size popup menu in lightbox.
.yui3-menu > .yui3-menu-children {
    position: absolute;
}
With it I only get the "small", see top image. Removing it I get the correct bottom image.

See if changing to this works better and not with affecting the lightbox.

.sm-page-widget-nav-toplink .yui3-menu>.yui3-menu-children{position:absolute}

markmicallef · August 18, 2013

basflt wrote: »
why dont you try this
.yui3-menu > .yui3-menu-children {
    position: absolute;
}

.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.2);
}
works for me
i had in theme CSS at first , but that did not work
but now in entire site CSS it work fine

note
position is relative by default

Allen wrote: »

See if changing to this works better and not with affecting the lightbox.

.sm-page-widget-nav-toplink .yui3-menu>.yui3-menu-children{position:absolute}

Yes Allen , it did cause a lightbox problem, your code fixed that.

But I noticed a visible problem with my radius menu in lightbox.

Can you help me hide that?

Allen · August 18, 2013

markmicallef wrote: »

Yes Allan , it did cause a lightbox problem, your code fixed that.

But I noticed a visible problem with my radius menu in lightbox.

Can you help me hide that?

Are you referring to the rounded corners of only the bottom of the size menu?
You have also lost the hover effects of the LB size menu.

BTW, your site menu is so transparent it makes reading anything difficult.

Allen · August 18, 2013

markmicallef wrote: »

...

Allen wrote: »

...
You have also lost the hover effects of the LB size menu.
...

This is what is causing the lost of a hover effect on the LB size menu. If this is only for your main site menu
might add .sm-page-widget-nav-toplink in front of each to make this CSS more specific and see what
happens. Edit: I can't find a specific identifier for this.

.sm-user-ui.yui3-menu-vertical a.yui3-menu-label: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 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:0;color:#8d8f93}

markmicallef · August 18, 2013

Allen wrote: »

Are you referring to the rounded corners of only the bottom of the size menu?
You have also lost the hover effects of the LB size menu.

BTW, your site menu is so transparent it makes reading anything difficult.

I'm referring to the light gray behind the rounded corners of the menu.

Thanks for the menu tranparency comment, I'll darken it up some more.

markmicallef · August 19, 2013

Allen wrote: »

Are you referring to the rounded corners of only the bottom of the size menu?
You have also lost the hover effects of the LB size menu.

BTW, your site menu is so transparent it makes reading anything difficult.

Allen wrote: »
This is what is causing the lost of a hover effect on the LB size menu. If this is only for your main site menu
might add .sm-page-widget-nav-toplink in front of each to make this CSS more specific and see what
happens.
.sm-user-ui.yui3-menu-vertical a.yui3-menu-label: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 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:0;color:#8d8f93}

hat did fix the broken hover, but it did ADD the Gray box on hover. I eliminated that in my main menu and opted for a white text on hover. How can I fix that?

markmicallef · August 19, 2013

markmicallef wrote: »

That did fix the broken hover, but it did ADD the Gray box while hovering. I eliminated that in my main menu and opted for a white text on hover. How can I fix that?

Originally Posted by Allen View Post
This is what is causing the lost of a hover effect on the LB size menu. If this is only for your main site menu
might add .sm-page-widget-nav-toplink in front of each to make this CSS more specific and see what
happens.
.sm-user-ui.yui3-menu-vertical a.yui3-menu-label: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 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:0;color:#8d8f93}

That did fix the broken hover, but it did ADD the Gray box on hover. I eliminated that in my main menu and opted for a white text on hover. How can I fix that?

I'm referring to the light gray behind the rounded corners of the menu.

markmicallef · August 19, 2013

markmicallef wrote: »

That did fix the broken hover, but it did ADD the Gray box on hovering. I eliminated that in my main menu and opted for a white text on hovering. How can I fix that?

I'm referring to the light gray behind the rounded corners of the menu.

Fixed it with this code

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

I would like to turn the text white on hover, Started a new thread for this question

RichmondImage · August 19, 2013

Hey, sorry I have been absent from the forum for the last week, I have been working on some other stuff that has been eating up all my time, glad there are a couple of people who know a bit more about this stuff working on this as well

toddbuchanan · August 25, 2013

I loved the transperance hack for my menus but I ran into the same thing with the menu problems in the lightbox...so I tried some tweeks and used your css code but just removed the last set on the second group of menus (.yui3-menu-children)...so my final css was this:

.yui3-menu> .yui3-menu-children {
position: static;
}

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

and everything seems to work fine now and looks great with the transperancy of the menu!

And I put the CSS code in a seperate sitewide CSS I created...it didn't seem to work if I put it in the Theme CSS...

Thanks for this great little hack...

Sir_Eagle · August 25, 2013

toddbuchanan wrote: »

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

Used this and finally got rid of the grey box behind my dropdown menus, except the cell being hovered over. Anyone know how to get rid of it when hovering?

[Deleted User] · September 2, 2013

The user and all related content has been deleted.

basflt · September 5, 2013

finally found the class for the ugly hover color

.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical .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:hover {
background: ...........
}

Fredsou · September 5, 2013

1- How to adjust the size of the word in drop down menu. My main nav the size are bigger than the drop down sub menu

basflt · September 6, 2013

Fredsou wrote: »

1- How to adjust the size of the word in drop down menu. My main nav the size are bigger than the drop down sub menu

in entire site , you have a menu box
click the wrench icon
make sure Top Link Format and Sub Link Format are the same

Fredsou · September 6, 2013

basflt wrote: »

in entire site , you have a menu box
click the wrench icon
make sure Top Link Format and Sub Link Format are the same

Same both. Is't ony for lowercase , upper case

I'm talking about size. I'm able to change the size with text size but the submenu stay at the same

Fredsou · September 7, 2013

I added a level in my nav bar and the coding is not applied to the sub-level. How can I have sub level Transparent... same as 1st level.
Nav bar -> Gallery -> Maternity Gallery -> Maternity

The coding is applied to Maternity Gallery but not to sub level Maternity

Figured out transparent Nav

Comments