Navbar/Menu: add translucent background w/rounded corners to each link; text opaque

corpuzrob · August 26, 2014

Hi Smuggers,

Here's my site: http://www.robcorpuz.com/

I'm using the Cosmo theme.

I'd like to add a translucent, colored background to each menu item in the nav-bar/menu and sub-menu, both for desktop view and for the collapsed mobile "menu." If it's not clear what I mean, you can look at the menu on my blog (http://blog.robcorpuz.com/), although the background is not translucent there (yet). I would like my smugmug site to have some visual design consistency with my wordpress.com blog and am using circles and rounded corners in the hope of doing this.
I tried doing this already by googling and copying bits of code from others (I'll add the code I was using below) to try to do this, and while the top menu looked okay, I can't get the default grey rectangular background of the sub-menu to disappear, or at least fade.
Also, I want to change the text to be left-justified, but when I did it the rounded backgrounds of the top-menu and sub-menu interfere with each other. I'd like to be able to move the sub-menu to the right.
I'd also like to keep the little arrows (that signify additional sub-menus) to be inside the rounded backgrounds.
On the mobile view, I'd like also to add the same translucent colored background with rounded corners to the whole menu (or at least the first, collapsed "menu") and reduce the width of the menu background.
I'd also like to adjust the font color (both regular and hover) just of the nav-bar, without having to change my default text/accent colors.
When I tried to adjust the opacity of the menu backgrounds, it faded the text as well. I'd like to keep the text opaque but be able to control the opacity of the backgrounds.

I've attached a screenshot showing as far as I got. Any help is greatly appreciated! Thank you in advance. Here's the code I tried to use (as you will quickly see, I'm very new to coding and thank you for your patience with a newbie

):

/* Nav bar borders */
/* Add a curved background to each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
background: #888eb2; !important;
opacity: 1;
border-radius: 100px;
padding: 7px 7px 7px 7px !important;
width: 93%;
margin-bottom: 10px !important;
}

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #888eb2;
border-radius: 100px;
margin-top: 10px !important;
margin-bottom: 10px !important;
margin-left: 20px !important;
margin-right: 20px !important;
padding: 7px 7px 7px 7px !important;
}

/* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
padding: 7px 7px 7px 7px;

}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #888eb2;
opacity: .5;
}

Thanks again! -Rob

bobbyhero · August 26, 2014

It looks like you haven't Published the changes you've taken a screenshot of above. It will help people to see what's going on with your live site (with the code above), to troubleshoot.

corpuzrob · August 26, 2014

Published) I was hoping to avoid that because I don't really like the way it's looking right now, but ok, I understand, thanks)

I also have changed the code since I added the post. Here's the relevant section:

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
color: #201864 !important;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #e3af01!important;
}

/*Adds Hover Transition Effect to Nav Bar*/
a {
-webkit-transition:color 0.15s ease-in;
-moz-transition:color 0.15s ease-in;
transition:color 0.15s ease-in;
}

.yui3-menu-children {
opacity: 0;
transition: opacity 0.15s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
opacity: 1;
}

/* Nav bar borders */
/* Add a curved background to each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
background: #888eb2; !important;
opacity: 1;
border-radius: 100px;
padding: 7px 7px 7px 7px !important;
width: 93%;
margin-bottom: 10px !important;
}

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #888eb2;
border-radius: 100px;
margin-top: 10px !important;
margin-bottom: 10px !important;
margin-left: 20px !important;
margin-right: 20px !important;
padding: 7px 7px 7px 7px !important;
}

/* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
padding: 7px 7px 7px 7px;

}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #888eb2;
opacity: .75;
}

Thanks.

bobbyhero · August 26, 2014

Getting it to look exactly as you want would be a pretty tedious process - since you're basically reverse engineering the Menu Content Block. I think it would be *much* simpler to just build your own navigation system from scratch with HTML/CSS (instead of using the Menu Content Block as a foundation). I'm sure you can find the code online to get exactly what you want, without having to jump through these hoops. That's my two educated cents. If you decide to continue down the current path, we can try troubleshooting with you - but I think you'd have less of a headache by just using HTML/CSS.

corpuzrob · August 26, 2014

Thanks for your reply!

Hmmm... how close could I get to what I want by continuing down the current path?

I can imagine that starting a new one from scratch would be better for someone who knows what they're doing, but I don't. Unless there's some kind of template that's pretty close to what I'm looking for that I could work from. If so, could you tell me where to find it? I just now did a search but couldn't come up with anything.

bobbyhero · August 26, 2014

Lots of tutorials online - this looks pretty promising:
http://css3menu.com/

But there are tons of others.

corpuzrob · August 26, 2014

Ok, thanks for the link. I think it's out of my league at the moment, but I've bookmarked it and will go back when I've got a better handle on things.

In the meantime, if possible could get your help to create a temporary fix just for the following?

1) Changing the button background color opacity while keeping text opaque (desktop)

2) Rounding the corners of the mobile "MENU" button background, changing the color, and changing the width (mobile)

If so it would be fantastic) Thanks!

bobbyhero · August 26, 2014

The following code makes most of the levels transparent. But again, reverse engineering stuff is messy, and I'm not a big advocate of it. It'd be a much better idea to build this from scratch:

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, .sm-user-ui .yui3-menu-vertical .yui3-menu-children, .sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children, .sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
background: none repeat scroll 0 0 transparent !important;
    box-shadow: none !important;
}



.sm-user-ui .yui3-menu-children, .sm-user-ui .yui3-menu-label {
border:none !important;
}

.yui3-menu-children {
border:none !important;
}

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, .sm-user-ui .yui3-menu-vertical .yui3-menu-children, .sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children, .sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
background:transparent !important;
box-shadow:none !important;
}

yui3-menu-children {
background:transparent !important;
}

html.sm-user-ui, .sm-user-ui {
background-color:transparent !important;
}

corpuzrob · August 26, 2014

Yeah, I definitely want to go back and make one later on)

Thanks for the code, but actually what I was asking in the last post was to be able to adjust the transparency of the rounded buttons (the ones that are now blue/purple) so that they can fade a bit, but so the text stays at 100% opacity. When I tried lowering the opacity of the buttons before, it also lowered the opacity of the text.

In my previous post I also asked about changing the mobile "MENU" button background (color, rounded corners, width). Is this doable?

Thanks!

Allen · August 26, 2014

corpuzrob wrote: »

Yeah, I definitely want to go back and make one later on)

Thanks for the code, but actually what I was asking in the last post was to be able to adjust the transparency of the rounded buttons (the ones that are now blue/purple) so that they can fade a bit, but so the text stays at 100% opacity. When I tried lowering the opacity of the buttons before, it also lowered the opacity of the text.

In my previous post I also asked about changing the mobile "MENU" button background (color, rounded corners, width). Is this doable?

Thanks!

.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
    background:[COLOR=Red] rgba(133,170,209, 0.2)[/COLOR];
    opacity: 1;
    border-radius: 100px;
    padding: 7px !important;
    width: 93%;
    margin-bottom: 10px !important;
}

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
    background: [COLOR=Red]rgba(133,170,209, 0.2)[/COLOR];
    border-radius: 100px;
    margin: 10px 20px !important;
    padding: 7px !important;
}

Was like this
background: none repeat scroll 0% 0% #888EB2;
opacity: 1;

corpuzrob · August 26, 2014

Great! That worked just fine)

Now, sorry to be a pest, but how about the mobile menu button?

Thanks!

Allen · August 26, 2014

corpuzrob wrote: »

Great! That worked just fine)

Now, sorry to be a pest, but how about the mobile menu button?

Thanks!

Try this. Edit: got to fix main button to remove box background, be back with edit.

.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
    text-align: center;
    background: rgba(133,170,209, 0.2);
    border-radius: 100px;
}

.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-sublevel { border: 0px none;
    background: rgba(133,170,209, 0.2);
    border-radius: 100px;
}
.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-sublevel {
    border: 0px none;
    background: rgba(133,170,209, 0.2);
    border-radius: 100px;
}

Back with edit

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
    [COLOR=red][strike][COLOR=#bbbbbb][b]background-color: #C4C4C4;[/b][/COLOR][/strike][/COLOR]
    [COLOR="Red"]background:none;[/COLOR]
}

Allen · August 26, 2014

Remove the
opacity: 1;
from each of the two rules in above post #10. It will effect the whole block including the text.

corpuzrob · August 27, 2014

Thanks, Allen, that code for the mobile menu worked just fine)

I know bobbyhero recommended creating a new navbar from scratch, and I fully plan to do that at some point, because I'm interested in learning more, but I'm so close to being satisfied with what I've got now (for the time being, anyway), I thought I'd ask and see if the following can be done by adjusting the code I've already got:

1) Make the navbar topmenu items clickable on the whole area of each individual background (the light blue-grey area with the rounded corners), not just the text. Basically I want the topmenu buttons to act the way the sub-menu buttons do, where you can click/hover anywhere within the button area and the button is selectable and the background color change when hovering covers the whole button, and not just where the text is.

2) When hovering over the sub-menu items, there is a light grey rectangular box that shows up just outside the right and left edges of the button that the cursor is over. I'd love to be able to just make that transparent. Just to be clear, I'm not talking about the big boxes that encompass the entire submenus: I'm ok with those big boxes being opaque (or maybe translucent). I'm talking about the ones that show up just when hovering on one individual sub-menu button. I know I could sort of fix this by changing the big box color to match those little boxes, but I'd prefer to just get rid of the little boxes altogether.

If I could get these two issues fixed I'd be really psyched. Thanks so much!

-Rob

corpuzrob · August 27, 2014

Here's the nav-bar code I've got right now:

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
color: #201864 !important;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #e3af01!important;
}

/*Adds Hover Transition Effect to Nav Bar*/
a {
-webkit-transition:color 0.1s ease-in;
-moz-transition:color 0.1s ease-in;
transition:color 0.1s ease-in;
}

.yui3-menu-children {
opacity: 0;
transition: opacity 0.15s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
opacity: 1;
}

/* Nav bar borders */
/* Add a curved background to each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
background: rgba(136,142,178, 0.15);
opacity: 1;
border-radius: 100px;
padding: 7.5px 7.5px 7.5px 14px !important;
margin-bottom: 15px !important;
}

/* Turn the navbar background a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
background: rgba(136,142,178, 1); !important;
opacity: 1;
border-radius: 100px;
padding: 7.5px 15px 7.5px 15px !important;
margin-bottom: 15px !important;
margin-left: -14px !important;
}

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: rgba(136,142,178, 0.15);
border-radius: 100px;
margin-top: 10px !important;
margin-bottom: 10px !important;
margin-left: 20px !important;
margin-right: 20px !important;
padding: 6px 15px 6px 15px !important;
}

/* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
padding: 7px 7px 7px 7px;
color: #bdbdbd;

}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #888eb2;
opacity: 1;
}

Allen · August 27, 2014

I would not use opacity: 1; anywhere as it affects the whole div including the text. Better to apply the transparency to the backgrounds.

BTW, where do you have all this menu CSS? In "entire site" CSS?

corpuzrob · August 27, 2014

Yeah, it's in "entire site." Am I not supposed to do that? I thought that since it's on every page of the site that's where I was supposed to put it.

Allen · August 27, 2014

Starting with this

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background: #888eb2;
  opacity: 1;
}

I removed the .yui3-menu-label to go up a level to remove the background.

/* Set the navbar submenu box hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item:hover {
  background: none;
  }

Allen · August 27, 2014

corpuzrob wrote: »

Yeah, it's in "entire site." Am I not supposed to do that? I thought that since it's on every page of the site that's where I was supposed to put it.

"entire site" is correct. I can't find it using WebDev in any of the CSS tabs though.

corpuzrob · August 27, 2014

Ok, did that and the little grey rectangular boxes are gone... but so is the blue hover color on the sub-menu links. Was this intentional?

Allen · August 27, 2014

corpuzrob wrote: »

Ok, did that and the little grey rectangular boxes are gone... but so is the blue hover color on the sub-menu links. Was this intentional?

Reverse the order of those two so
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover
is second.

corpuzrob · August 27, 2014

Ah, okay, I misunderstood at first. I originally replaced the first box with the second box rather than just adding the second. The secondary color on the submenu background is back and the little grey boxes are gone. Thanks)

corpuzrob · August 27, 2014

How about my other question from post #14, about the nav-bar top menu? Any update there? :^) Thanks)

Allen · August 27, 2014

corpuzrob wrote: »

How about my other question from post #14, about the nav-bar top menu? Any update there? :^) Thanks)

I looked at it for quite awhile and couldn't figure it out. Maybe someone else has an idea.

Hikin' Mike · August 27, 2014

EDIT: Didn't Work. Deleting.

Try this below http://www.dgrin.com/showpost.php?p=1966751&postcount=27

Hikin' Mike · August 27, 2014

Hikin' Mike wrote: »

Try this:

.sm-page-widget-nav-toplink:hover, 
.sm-page-widget-nav-toplink:hover:last-child,
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    background: rgba(136, 142, 178, 1) !important;
    }

...I guess it isn't exactly 100% correct.

Hikin' Mike · August 27, 2014

Think I got it. You'll need to remove this:

.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
    background: none repeat scroll 0 0 rgba(136, 142, 178, 0.15);
    border-radius: 100px;
    margin-bottom: 15px !important;
    opacity: 1;
    padding: 7.5px 7.5px 7.5px 15px !important;
}
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    background: none repeat scroll 0 0 rgba(136, 142, 178, 1);
    border-radius: 100px;
    margin-bottom: 15px !important;
    margin-left: -14px !important;
    opacity: 1;
    padding: 7.5px 15px !important;
}

And add this:

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a {
    display: block;
    border-radius: 100px;
    margin-bottom: 15px !important;
    padding: 7.5px 7.5px 7.5px 15px !important;
    } 

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {
    background: rgba(136, 142, 178, .15) !important;
    }
    
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover{
    background: rgba(136, 142, 178, 1) !important;
    }

corpuzrob · August 28, 2014

Thanks again for all your help, everyone!

Hikin' Mike, I tried putting in the code you suggested, but I think I must have done it wrong. Maybe I misunderstood. First I replaced the old code with the new code from your last post, than I tried also adding the code from your previous post, but I still got the same result. The full button is clickable now, and the hover color covers it, which is great, but there's a second button/shaded area outside the original one (I attached a screenshot) in the nav topmenu now, and the alignment of everything has shifted also. What did I do wrong? Thanks)

Hikin' Mike · August 28, 2014

corpuzrob wrote: »

Thanks again for all your help, everyone!

Hikin' Mike, I tried putting in the code you suggested, but I think I must have done it wrong. Maybe I misunderstood. First I replaced the old code with the new code from your last post, than I tried also adding the code from your previous post, but I still got the same result. The full button is clickable now, and the hover color covers it, which is great, but there's a second button/shaded area outside the original one (I attached a screenshot) in the nav topmenu now, and the alignment of everything has shifted also. What did I do wrong? Thanks)

Looks like you removed the code I gave you. Can't trouble shoot something if I/we can't see it.

corpuzrob · August 28, 2014

Ok, hold on, I'll publish it in just a minute...

corpuzrob · August 28, 2014

Ok, it's published, thanks)

Navbar/Menu: add translucent background w/rounded corners to each link; text opaque

Comments