Menu customization

ifmgabboy · August 28, 2013

Hi,
I'm slowly working on my site. I would like to have the menu bar fill appear 50% transparent grey. Am I missing something obvious?
My other question is how to have the hover color change as well as have a matching overbar. I have the color change, now wondering what the code is to have a matching bar above.
Thanks, any help would be appreciated.
Bruce
brucehowatt.com

markmicallef · August 28, 2013

You can do this by adding CSS to "Entire Site"

This is to change opacity of the menu (change the 0.6 from 0.1 to 0.9) to adjust the opacity

  .sm-user-ui.yui3-menu-vertical, .sm-user-ui.yui3-menu-vertical> .yui3-menu-children, .sm-user-ui .yui3-menu-vertical .yui3-menu-children {
   background-color: rgba(0, 0, 0, [COLOR="Red"]0.6[/COLOR]);
   }

Change the hover color with this css (change this #ffffff to your color)

 .sm-page-widget-nav-toplink a :hover, 
 .sm-page-widget-nav-toplink a:hover {
  color: [COLOR="red"]#ffffff[/COLOR]!important;
  }

pmbpro · August 28, 2013

markmicallef wrote: »
You can do this by adding CSS to "Entire Site"

This is to change opacity of the menu (change the 0.6 from 0.1 to 0.9) to adjust the opacity
  .sm-user-ui.yui3-menu-vertical, .sm-user-ui.yui3-menu-vertical> .yui3-menu-children, .sm-user-ui .yui3-menu-vertical .yui3-menu-children {
   background-color: rgba(0, 0, 0, [COLOR=Red]0.6[/COLOR]);
   }

Hi Mark,

I was about to ask this same question about the transparent menus (thanks OP for asking)!

Thanks for providing this code.
Does this only work for vertical menus? I have a horizontal one. How can this code work for my site? Thanks.

markmicallef · August 28, 2013

pmbpro wrote: »

Hi Mark,

I was about to ask this same question about the transparent menus (thanks OP for asking)!

Thanks for providing this code.
Does this only work for vertical menus? I have a horizontal one. How can this code work for my site? Thanks.

I believe you can just use horizontal in place of vertical, but looking at your site, Its horizontal but the driop downs are vertical like mine.

pmbpro · August 28, 2013

markmicallef wrote: »

I believe you can just use horizontal in place of vertical, but looking at your site, Its horizontal but the driop downs are vertical like mine.

Thanks Mark.

Hmm, and I already had the separate code for my drop-downs to be transparent.

I tried substituting with 'horizontal' in your code, but it didn't work.
I want the entire top section of the theme's black bar section (navbar and logo) to be transparent.
Maybe I can't change that part of the theme's design?

markmicallef · August 28, 2013

pmbpro wrote: »

Thanks Mark.

Hmm, and I already had the separate code for my drop-downs to be transparent.

I tried substituting with 'horizontal' in your code, but it didn't work.
I want the entire top section of the theme's black bar section (navbar and logo) to be transparent.
Maybe I can't change that part of the theme's design?

Try going into Edit Theme > Background Tab Scroll down to Header and adjust the Alpha Slider

pmbpro · August 28, 2013

markmicallef wrote: »

Try going into Edit Theme > Background Tab Scroll down to Header and adjust the Alpha Slider

That's it! Thank you!

I never looked at the "Background" section in there because I never needed to change anything and wanted Black anyway,

! I never considered that all those transparency settings would be in there in that tab.

Thank you so much Mark!

ifmgabboy · August 28, 2013

Thanks, that helped enormously! any idea on how to put in an overhead line or underline for the hover on the menu at the same time as the colour change?

Thanks again,
Bruce
brucehowatt.com

pmbpro · August 28, 2013

ifmgabboy wrote: »

Thanks, that helped enormously! any idea on how to put in an overhead line or underline for the hover on the menu at the same time as the colour change?

Thanks again,
Bruce
brucehowatt.com

Hi there!
I believe that code can be found on this page (the third one called "Add a Line or Border Around Each Item in Your Menu"), thanks to Aaron. You can add a line above, below or on the sides, etc. :-)

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

leftquark · August 28, 2013

pmbpro wrote: »

Hi there!
I believe that code can be found on this page (the third one called "Add a Line or Border Around Each Item in Your Menu"), thanks to Aaron. You can add a line above, below or on the sides, etc. :-)

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

Indeed I do give the CSS, but it's static and not for when the mouse hovers. The code for displaying a line at all times is as follows:

/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
  border-bottom: 1px solid #595959 !important;
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

If you want to make it change when they hover do the following by adding "a: hover" in the top line:

/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink a:hover, .sm-page-widget-nav-toplink:last-child a:hover {
  border-bottom: 1px solid [COLOR="Red"]red[/COLOR] !important;
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

pmbpro · August 28, 2013

Oh, thanks for popping in, Aaron! That second one with "a:hover" is very helpful. I'll have to save that one too. :-)

Darter02 · August 28, 2013

Curious, anyone know how to change the menu titles' opacity?

I used some script from the forums to cause my social icons to fade a tad. I'd like to do the same to my titles, but not as much. I tried modify the text in the code myself but can't get it to work.

Here's the code for the social icons. Source is from the forums here, can't recall the originator...

.sm-page-widget-social-links.sm-social-links-small .sm-fonticon
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.sm-page-widget-social-links.sm-social-links-small .sm-fonticon:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

Menu customization

Comments