Nav Menu customizations

grosloulou · August 8, 2013

hallo,
what do you suggest for my site :
http://labrophotography.smugmug.com/
btw I have one drop down menu under Info whose rollover color seems ok

which code do i finally copy and where to copy it ?

why doesn't smugmug suggests these settings in the customize. It would avoid all these dgrin discussions

there is definitely a lack in menu settings and header settings. for instance my header is too big, poorly centered ugly while the following is really nice :
http://portfolio.scottkelby.com/

best regards
marc

Cindy · August 9, 2013

aschendel wrote: »

I did a border-right hack on my menu to get a | separator, check out my site if you want...
[/code]

Instead of the pipes, Does anyone know how to add a bullet separator?
Like on my legacy site www.Co-Bear.com

RichmondImage · August 9, 2013

I know this isn't the menu you are talking about, but do you know how to make the boxes in my drop-nav transparent?

aschendel · August 9, 2013

Cindy wrote: »

Instead of the pipes, Does anyone know how to add a bullet separator?
Like on my legacy site www.Co-Bear.com

This isn't completely awesome but it works on my site and might be reliable enough:

.sm-page-widget-nav-toplink {
  font-family: courier new;
  font-size:1.2em;
  font-weight:bold;
  padding: 0 0 0 15px; /* this controls the spacing to the left of each link */
  margin:0px !important;
}

.sm-page-widget-nav-toplink:after {
    content: "•"; /* this is the bullet, could be any character */
}

.sm-page-widget-nav-toplink:last-child:after {
    content: ""; /* this takes the bullet away from the last item in the list */
}

.sm-page-widget-nav-toplink a {
  margin-right:15px;  /* this controls the spacing to the right of each link, before the bullet */
}

Cindy · August 9, 2013

aschendel wrote: »

This isn't completely awesome but it works on my site and might be reliable enough:

.sm-page-widget-nav-toplink {
  font-family: courier new;
  font-size:1.2em;
  font-weight:bold;
  padding: 0 0 0 15px; /* this controls the spacing to the left of each link */
  margin:0px !important;
}

.sm-page-widget-nav-toplink:after {
    content: "•"; /* this is the bullet, could be any character */
}

.sm-page-widget-nav-toplink:last-child:after {
    content: ""; /* this takes the bullet away from the last item in the list */
}

.sm-page-widget-nav-toplink a {
  margin-right:15px;  /* this controls the spacing to the right of each link, before the bullet */
}

Thanks for sharing. At first I thought it was going to work but for some reason the bullets keep randomly dropping down below the nav bar. It's really weird because one second they'll be in line perfect and then poof… they drop down

EagleEye1 · August 9, 2013

Which one of these posts would I use to highlight my navbar in the new Smugmug? I simply used the website navbar to create mine...nothing fancy. But want the navbar to highlight when the cursor is place over or when galleries are changed.

snakeey11 · August 9, 2013

Cindy wrote: »

Thanks for sharing. At first I thought it was going to work but for some reason the bullets keep randomly dropping down below the nav bar. It's really weird because one second they'll be in line perfect and then poof… they drop down

This is most likely due to that item having a submenu. You might try adding some additional CSS to position the bullet, something like:

.sm-page-widget-nav-toplink:after {
  /* other rules here... */
  position: absolute;
  top: 0;
}

-Mike

snakeey11 · August 20, 2013

pipercreekphotography wrote: »

I would like separators between each word on my navbar any suggestions?

Separators wanted are: | the veritcal lines

FYI, there are now two dedicated toggles in the menu options to turn on/off separators for both the top- and sub-level items in a horizontal/vertical navbar. Note that for your fancier bullets and things of that nature, you'll still need custom CSS.

Mike%20Diaz%20Photography.png

-Mike

Cindy · August 21, 2013

Need CSS to change drop down font
In Smugmug's theme settings I choose fonts 'Engagement' & 'Droid Seref' but by default smugmugs idea of where each should be used doesn't match so… I'm using the following code to specify 'Engagement' for the navbar

/****** BEGIN NAV BAR FORMATTING ******/
.sm-page-widget-nav-toplink {
  font-family: Engagement;
  font-size:1.8em;
}

.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: #b21131!important;
}
/****** END NAV BAR FORMATTING ******/

Resulting in this unveiled site navbar:

But… As you can see it also changes the navs drop down font & size… I'd prefer font Engagement used only in the top level & Droid Sans in the drop down. Anyone???

snakeey11 · August 21, 2013

Cindy wrote: »

But… As you can see it also changes the navs drop down font & size… I'd prefer font Engagement used only in the top level & Droid Sans in the drop down. Anyone???

You should be able to target the submenus separately using something like:

.sm-page-widget-nav .yui3-menu {
   /* font rules here */
}

-Mike

Cindy · August 22, 2013

Thank You Mike. That worked to change the font itself but I can't change the font size. I've tried both em & px but it doesn't effect it. Weird…
Here's my code:

/********** BEGIN NAV BAR FORMATTING **********/
.sm-page-widget-nav-toplink {
  font-family: Engagement;
  font-size: 1.8em;
}
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: #b21131!important;
}

/*** DROP NAV RULES HERE ***/
.sm-page-widget-nav .yui3-menu {
  font-family: Droid Serif;
  font-size: 12px;
}
/********** END NAV BAR FORMATTING **********/

Allen · August 22, 2013

Cindy wrote: »
Thank You Mike. That worked to change the font itself but I can't change the font size. I've tried both em & px but it doesn't effect it. Weird…
Here's my code:
/********** BEGIN NAV BAR FORMATTING **********/
.sm-page-widget-nav-toplink {
  font-family: Engagement;
  font-size: 1.8em;
}
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
  color: #b21131!important;
}

/*** DROP NAV RULES HERE ***/
.sm-page-widget-nav .yui3-menu {
  font-family: Droid Serif;
  font-size: 12px;
}
/********** END NAV BAR FORMATTING **********/

Try
font-size: 12pt !important;
Might need the !important also.

It's usually best to use point sizes rather then pixel size.
or percentages
font-size: 110% !important;

Cindy · August 22, 2013

Allen wrote: »

Try
font-size: 12pt !important;
Might need the !important also.

It's usually best to use point sizes rather then pixel size.
or percentages
font-size: 110% !important;

That's not working either but thank you. Once I unveil the site I'll come back for clearing up things like this that way you'll can see it as well.

snakeey11 · August 22, 2013

Cindy wrote: »

That's not working either but thank you. Once I unveil the site I'll come back for clearing up things like this that way you'll can see it as well.

Ah. You probably need to use ".sm-page-widget-nav .yui3-menu .yui3-menu-item" as your selector instead.

-Mike

Cindy · August 23, 2013

Ahh sweet! That worked Mike

I did still have to use the 'Important' as Allen suggested but it worked

Which brings me to another ?… I read somewhere that it wasn't advised to use the important tag any longer…

So will using it cause problems???

Cindy · August 23, 2013

!important Tag… Here's wehere I read NOT to use it… http://www.smugocity.com/FAQ/Important but I tried changing to there suggested option & it doesn't work so… !important tag it is!

snakeey11 · August 23, 2013

Cindy wrote: »

!important Tag… Here's wehere I read NOT to use it… http://www.smugocity.com/FAQ/Important but I tried changing to there suggested option & it doesn't work so… !important tag it is!

Yeah, it's a good rule of thumb in general to try to avoid using !important, so you can probably make the selector more specific and not have to use it. I think this should work:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu .yui3-menu-item {
  /* shoudn't need !important */
}

If that doesn't work, I wouldn't worry too much about using !important in this particular case.

-Mike

basflt · August 23, 2013

AFAIK the !importent will just override existing ( site-wide ) rules
if the same rule dont exist then !importent is not needed

Cindy · August 23, 2013

snakeey11 wrote: »
Yeah, it's a good rule of thumb in general to try to avoid using !important, so you can probably make the selector more specific and not have to use it. I think this should work:
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu .yui3-menu-item {
  /* shoudn't need !important */
}
If that doesn't work, I wouldn't worry too much about using !important in this particular case.

-Mike

Mike your indeed a gem!!! Works perfectly & yes without 'Important'! Thank You!!!

[Deleted User] · September 7, 2013

The user and all related content has been deleted.

brandofamily · September 7, 2013

ShutterSpy wrote: »

Has anyone figured out how to change the HOVER background color?? I'm having the hardest time with this.

My menu is translucent, but the hover box is a solid grey and I can't figure out how to change that!!

Play around with this... It's what I used...

/*Flyout Background*/
.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: rgba(31,32,33, .80);
}

/*Flyouts Text and Border*/
.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-label {
    border-color: rgba(31,32,33, 0);
    border-radius:25px; 
    background-color: rgba(31,32,33, .80)
}

/*Hover Background Change*/
.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: rgba(31,32,33, .1);
}

.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: rgba(31,32,33, .40);
    border-color: rgba(31,32,33, 0);
    color: #e7e7e7;
}

[Deleted User] · September 8, 2013

The user and all related content has been deleted.

Nav Menu customizations

Comments