CSS code to thin down width of navbar dropdown links?

ChancyRat

I have a horizontal menu on the site, but the dropdown links to the subgalleries are too wide apart. I saw in another thread that someone used CSS code to fix this, but it was for the vertical accordion menu type. Either way I couldn't do CSS myself. Would someone post the code for the horizontal menu? Thanks.

leftquark

Hey it's me again, to your rescue (I hope).... I use the following code to alter my horizontal sub-menu:

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  padding: 7px 32px 6px 11px !important;
  font-size: 12px;
  /* border: 1px solid rgba(89, 89, 89, 0.4) !important; */
  border-bottom: 1px solid #595959 !important;
  background-color: rgba(68, 68, 68, 0.75);
}

You'll prob. want to play with the padding. Since you sent me your HTML source code I can actually see what your sub-menu navbar looks like. I assume when you say they're "too wide apart" you're not meaning their actual width but rather the space above and below each link?

The sub-links are going to adjust to the maximum size they need to be so that your text fits. SOme of your links are quite long (a lot of characters) so the sub-menu navbar will be fairly wide. I do see that there is some padding to the left/right of the links that could be reduced. The "padding" code above controls how much spacing there is. If all you want to do is reduce the spacing, get rid of all the other lines andl eave just the "padding" line.

In the padding command the 4 numbers are as follows:
padding:7px 32px 6px 11px;
top padding is 7px
right padding is 32px
bottom padding is 6px
left padding is 11px

ChancyRat

Further tweaks
Awesome and perfect, thank you sooo much.
How about:
- the fade-in effect I see here: http://www.brandolinoimaging.com/Info-Pages/Help-Pages/n-zvWvH
- transparency as opposed to or along with a background color? Example: http://www.rosscollins.smugmug.com/

leftquark

ChancyRat wrote: »

Awesome and perfect, thank you sooo much.
How about:
- the fade-in effect I see here: http://www.brandolinoimaging.com/Info-Pages/Help-Pages/n-zvWvH
- transparency as opposed to or along with a background color? Example: http://www.rosscollins.smugmug.com/

I couldn't quite get the fade-in effect to work. I know it needs some kind of code like this, but I couldn't figure out which element to apply it to, to make it work

    -webkit-transition:all 0.25s ease-in;
    -moz-transition:all 0.25s ease-in;
    transition:all 0.2s ease-in;

Transparent background color is easy: just look up the CSS command "rgba()".
rgba() takes 4 parameters: 3 RGB color values and a transparency value between 0.0 (completely transparent) and 1.0 (completely opaque).
Instead of using a color like #FFFFF you use the RGB value's (like 255, 255, 255).

So you might have a line that says "background-color: rgba(255, 255, 255, 0.4);"

Hope that helps.

ChancyRat

Aaron, the code for transparency didn't work. I think I have conflicting code now. I had pulled this from some customization site (forgot I did that).

/* Set the buttons to transition grey on mouse hover */
.sm-user-ui .sm-button-skin-accent:hover {
background-color: #286DC3;
border-color: #286DC3;
}
/*
when a user hovers over a link instead of it instantly going
to the hover decoration, it will fade in and out to it
*/
a {
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}

And then the code you gave me:

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 12px;
/* border: 1px solid rgba(89, 89, 89, 0.4) !important; */
border-bottom: 1px solid #595959 !important;
background-color: rgba(227, 226, 216, 0.0);
}

I am not sure what to take out or change.

ChancyRat

Aaron, would you be so kind as to fix this? I entered your code, but since then have been trying to fix the problems on my own, so the new code is this:

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 12px;
border-bottom: 1px solid #1F272A !important;
background-color: rgba(242, 208, 152, 0.9);
}

But it is not changing the colors in any way. The current test theme image is attached. I see I was able to change the major color of the links to a tan, but the hover color and borders of the outsides, remain grey. I cannot find anywhere that I change that color.

EDIT: I forgot I also need to make the whole drop-down menu transparent, cannot find that.

leftquark

ChancyRat wrote: »

Aaron, would you be so kind as to fix this? I entered your code, but since then have been trying to fix the problems on my own, so the new code is this:



But it is not changing the colors in any way. The current test theme image is attached. I see I was able to change the major color of the links to a tan, but the hover color and borders of the outsides, remain grey. I cannot find anywhere that I change that color.

EDIT: I forgot I also need to make the whole drop-down menu transparent, cannot find that.

Above "border-bottom ..." add a "border" command:

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 12px;
[COLOR="Red"]border: 1px solid rgba(242,208,152,0.9);[/COLOR]
border-bottom: 1px solid #1F272A !important;
background-color: rgba(242, 208, 152, 0.9);
}

I'm not sure on the transparent background.

ChancyRat

leftquark wrote: »

Above "border-bottom ..." add a "border" command:

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 12px;
[COLOR=Red]border: 1px solid rgba(242,208,152,0.9);[/COLOR]
border-bottom: 1px solid #1F272A !important;
background-color: rgba(242, 208, 152, 0.9);
}

I'm not sure on the transparent background.

This is not working and I may not have been clear on the problem. In the image I put yellow over part of the link the hand is hovering over. When hovered over, a link turns grey. I want to change that grey to something else. I cannot find code on the site that controls the hover color.

Allen

ChancyRat wrote: »

This is not working and I may not have been clear on the problem. In the image I put yellow over part of the link the hand is hovering over. When hovered over, a link turns grey. I want to change that grey to something else. I cannot find code on the site that controls the hover color.

See if this works for you.

.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
   color: gold !important;
}

leftquark

ChancyRat wrote: »

This is not working and I may not have been clear on the problem. In the image I put yellow over part of the link the hand is hovering over. When hovered over, a link turns grey. I want to change that grey to something else. I cannot find code on the site that controls the hover color.

Sorry, I ignored the hover color and only addressed that you mentioned your border was grey. Do you want to leave the border grey or do you also want to change it? The above code will fix the border.

To change the background when the mouse hovers over it:

.yui3-menu .yui3-menu-label:hover {
background-color: green !important;
}

leftquark

Allen wrote: »

See if this works for you.

.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
   color: gold !important;
}

I don't think this will do what she wants -- she wants to change the background color not the text color

ChancyRat

leftquark wrote: »

Sorry, I ignored the hover color and only addressed that you mentioned your border was grey. Do you want to leave the border grey or do you also want to change it? The above code will fix the border.

To change the background when the mouse hovers over it:

.yui3-menu .yui3-menu-label:hover {
background-color: green !important;
}

Hooray I am learning to communicate this lingo. Great. As for the transparency, I see two sites that have it so I know it can be done:

http://rosscollins.smugmug.com/
http://www.onbroadwaydancers.com/

In trying variations, what I've left out is that I want the background to be "seen" through the transparency.
All the tries so far yield a lighter or darker color. None of them bring the background into the hover.

Here is a line of code from another thread that I tried, to get transparency, but no matter what I do, I get either a revert to the grey (Is that the default of the theme???), or a default to the solid pale yellow that I input as a test for the rgba.

background-color: rgba(0, 0, 0, 0.9);

What is needed to make the hover colors (both the main menu dropdown list, and the hover color), different varieties of transparency to the background of the webpage. E.g., no color.

Sorry again my learning curve for terms.

ChancyRat

Here is a thread with lots of discussion about transparency and the menu but I cannot tell what if any code applies to my situation.
http://www.dgrin.com/showthread.php?t=239876&highlight=transparency

leftquark

ChancyRat wrote: »

Hooray I am learning to communicate this lingo. Great. As for the transparency, I see two sites that have it so I know it can be done:

In trying variations, what I've left out is that I want the background to be "seen" through the transparency.
All the tries so far yield a lighter or darker color. None of them bring the background into the hover.

What is needed to make the hover colors (both the main menu dropdown list, and the hover color), different varieties of transparency to the background of the webpage. E.g., no color.

Chancy,
I apologize for not being clear. The lingo you've used from the beginning was the correct lingo. I understand what you want, I've just not been able to figure out the code to do it. The rgba() command is the correct command to use. The problem is that there are multiple layers at work and I cannot seem to figure out which layer is causing the static/non-transparent background to be there.

OK, I take that back. I think I figured it out...

/* Set the background transparency on the navbar */
.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: rgba(68, 68, 68, 0.1);
}

/* Turn off the background color that was making it not transparent enough */
.yui3-menu-item .yui3-menu-label {
  background-color: rgba(0, 0, 0, 0.0) !important;
}

On that 2nd part, where it says "turn off the background color ..." you may already have some CSS for that ".yui3-menu-label". If you did, just delete the "background-color" line ... or set it to rgba(0,0,0, 0.0); to make it completely clear.

The first line above is where you set the actual color and transparency. For testing purposes I set it to really transparent (0.1).

Hope that helps.

ChancyRat

Aaron you are just too awesome. Maybe this code should be posted on a separate thread so people have easy access to it, but first there are a couple of bugs. For one, I got myself very discombobulated and thought, why have I been asking for how to set the hover colors and then for transparency to the background at the same time? That can't be right. I see now that it can be right now but I have already removed what I thought was problem code. So now I'm not sure what I might be missing.

And, I realized "be careful what you wish for", because I see in my test background right now, the code you just supplied makes for a non-good result.

Finally, there must be one bit of code missing because the hover color for the drop-down links now first hovers to grey and then to yellow, in the "fade transition". Before I added this recent code, it went from the pale tan, to yellow. (I might have removed the pale tan line?) Does this mean that you got the background transparency for the link itself but not for the hover-color?

Here is the total code I have that I think is relevant:

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 12px;
border: 1px solid rgba(242,208,152,0.9);
border-bottom: 1px solid #1F272A !important;
background-color: rgba(0, 0, 0, 0.0);
}
/* Set the background transparency on the navbar */
.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: rgba(68, 68, 68, 0.1);
}
/* Turn off the background color that was making it not transparent enough */
.yui3-menu-item .yui3-menu-label {
background-color: rgba(0, 0, 0, 0.0) !important;
}
.yui3-menu .yui3-menu-label:hover {
background-color: rgba(253, 247, 198, 0.9) !important;
}
/* when a user hovers over a link instead of it instantly going to the hover decoration, it will fade in and out to it */
a {
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
/* Make each sub-menu item fade in/out as the mouse moves over it */
.yui3-menu-label {
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}

Thank you.

ChancyRat

The pesky grey
I don't know if this helps explain anything but this pesky grey background that seems to exist as a default in the theme, is also at the top Smugmug navbar. It has a default grey which now transitions to the pale yellow. So your code applied at a high level as well, not just my site navbar.

Also, this thread, your code in #15:
http://www.dgrin.com/showthread.php?t=241108
Contributed to making my sitemap links transparent.

http://www.dgrin.com/showthread.php?t=241108

tobeme

I am using the following codes as given above for my navbar

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.0);
}
/* Set the background transparency on the navbar */
.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: rgba(68, 68, 68, 0.2);
}


However, I wonder if I can 1) get rid of the border lines (which give a box effect), change the background color for the drop down menu and 3) change the color for the links of the entire navbar?



Thanks

rht

Yes, you can do that.

Three times I applied it:

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu,
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children {
border-style: none;
}

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
    border-style: none;
}

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label:hover {
border-style: none;
}

Once for normal, another for rollover and the other one to stop the border around the entire drop down.

tobeme

Thanks a lot rht! Works perfectly!

tobeme

Not sure has any one tested this navbar on iPad? The first link shows up again on the drop down menu. There is a double showing of the first link.

EDIT: Checked with smugmug, it is purposely done for pads and phones.

tobeme

I'm using the below codes (as given above) for my site. However, I want to set up a vertical navbar for my homepage. I wonder how to change the code such that it will work on vertical navbar? Help is highly appreciated.

/* Bold the menu nav links in the HEADER */
.sm-page-layout-region-top .sm-page-widget-nav-toplink {
font-weight: 500;
}

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.0);
}
/* Set the background transparency on the navbar */
.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: rgba(68, 68, 68, 0.3);
}

/* Remove the border lines which give a box effect on the navbar */
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu,
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children {
border-style: none;
}

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-style: none;
}

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label:hover {
border-style: none;
}

leftquark

Any time you see "top" replace it with "left"

tobeme

Thanks leftquark.

bobh665

Almost Works For Me

leftquark wrote: »

Hey it's me again, to your rescue (I hope).... I use the following code to alter my horizontal sub-menu:

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  padding: 7px 32px 6px 11px !important;
  font-size: 12px;
  /* border: 1px solid rgba(89, 89, 89, 0.4) !important; */
  border-bottom: 1px solid #595959 !important;
  background-color: rgba(68, 68, 68, 0.75);
}

You'll prob. want to play with the padding. Since you sent me your HTML source code I can actually see what your sub-menu navbar looks like. I assume when you say they're "too wide apart" you're not meaning their actual width but rather the space above and below each link?

The sub-links are going to adjust to the maximum size they need to be so that your text fits. SOme of your links are quite long (a lot of characters) so the sub-menu navbar will be fairly wide. I do see that there is some padding to the left/right of the links that could be reduced. The "padding" code above controls how much spacing there is. If all you want to do is reduce the spacing, get rid of all the other lines andl eave just the "padding" line.

In the padding command the 4 numbers are as follows:
padding:7px 32px 6px 11px;
top padding is 7px
right padding is 32px
bottom padding is 6px
left padding is 11px

I havnt had a chance to switch until now. Anyway Ive been trying to get my navbar to look better and used your code. It looks great but only works on my homepage. How can I get it to work on the rest of my site? I have the code in the Entire Site - Theme - CSS. Does it have to be somewhere else?

Thanks ......... Bob

Figured it out. I somehow had 2 themes with the same name in different places. Deleted 1 and navbar works on everything.