Menu flyout customization help

MonkeyHipsandRice

Greetings all,

I am trying to find code to modify my flyout menu in new smugmug. My old one is here: www.TimothyFernandez.com. I would love to have my rounded menu back. Mainly I am not happy with the blocky look of the Newsmug when I mouse over a flyout. It does not have to be exactly like it but similar would be grand. I am also toying using a vertical menu on the left side now in my new smugmug if thats a differance in where I start. I just want to tinker with the code and need someplace to work from. I just need a friendly finger to point me in the right direction or a kick in the pants. Even if its a thread I overlooked. Open to all ideas and suggestions as any help would be apprciated and applauded:clap. Thank you Kindly.

Kind Regards,

T.

snakeey11

Something like this would probably give you a decent starting point.

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu {
  background: transparent;
}

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

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-item {
  margin: 6px 0;
}

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu .yui3-menu-label {
  background-color: #fff;
  border-color: #000;
  border-radius: 10px;
  border-width: 1px;
  color: black;
}

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu .yui3-menu-label:hover {
  background-color: #000;
  border-color: #fff;
  border-radius: 10px;
  border-width: 1px;
  color: white;
}

I quickly tested this and it gets reasonably close to your existing style.

-Mike

MonkeyHipsandRice

Just a few problems
First Thank you much for your help. That is much closer to my legacy design. I have my menu setup as follows. home, galleries, about me, pricing. The menu flyout works great on galleries. However on About me or anyother flyout after galleries the text and background are white. So you see nothing until you mouse over it. I tried chaging some of the colors but that just messes up galleries flyout. I would like to fix that please if you can help. How do I give the home, galleries buttons a background and rounded text like the flyouts? I am new to this kind of CSS coding after getting comfortable with the old way. I feel a bit lost, but undaunted Thanks for your help. New site is gonna be better than the old. I can't wait!

Kind Regards,

Timothy

snakeey11

MonkeyHipsandRice wrote: »

First Thank you much for your help. That is much closer to my legacy design. I have my menu setup as follows. home, galleries, about me, pricing. The menu flyout works great on galleries. However on About me or anyother flyout after galleries the text and background are white. So you see nothing until you mouse over it. I tried chaging some of the colors but that just messes up galleries flyout. I would like to fix that please if you can help. How do I give the home, galleries buttons a background and rounded text like the flyouts? I am new to this kind of CSS coding after getting comfortable with the old way. I feel a bit lost, but undaunted Thanks for your help. New site is gonna be better than the old. I can't wait!

Kind Regards,

Timothy

I believe for the first issue you'll need to add the :visited pseudo-class for the label, i.e.

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu .yui3-menu-label,
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu .yui3-menu-label:visited {
  background-color: #fff;
  border-color: #000;
  border-radius: 10px;
  border-width: 1px;
  color: #000;
}

As for the top level menu items they can be targeted using the ".sm-page-widget-nav-toplink" class, so something like the following should work:

.sm-page-widget-nav .sm-page-widget-nav-toplink > a {
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #000;
  padding: 10px;
}

Hope that helps!

-Mike

Sir_Eagle

I have different code but a similar result for my menu. The only thing I can't figure out is, on the level you are hovering over the background still has square corners. Can anyone figure out how to round the corners of the hover background.

MonkeyHipsandRice

Pondering
Thank you much Mike!!

That did the trick. Now I have much to tinker with. Is there anyway to center the text within the bubble/border I create? I tried more than a few of my old tricks but they are not working. If not then I will leave with it...or it will keep me up tonite. Latter more probable . Thank you again for your help. Its looking more like I picture.

kind Regards,

Timothy

MonkeyHipsandRice

Sir_Eagle wrote: »

I have different code but a similar result for my menu. The only thing I can't figure out is, on the level you are hovering over the background still has square corners. Can anyone figure out how to round the corners of the hover background.

I just used the Border-radius: 15px; or as round as you want it. I applied it to the drop-down menu section of the code. That worked but...My cells are not alliegned with each other so when I hover and the flyout pops out...it looks a bit....drunk as if it can't stay parallel with the cells from which it emerged. I am sure there is code to fix this but I am having trouble steering them myself. Hope this helped

Kind Regards,

T.

Sir_Eagle

MonkeyHipsandRice wrote: »

I just used the Border-radius: 15px; or as round as you want it. I applied it to the drop-down menu section of the code. That worked but...My cells are not alliegned with each other so when I hover and the flyout pops out...it looks a bit....drunk as if it can't stay parallel with the cells from which it emerged. I am sure there is code to fix this but I am having trouble steering them myself. Hope this helped

Kind Regards,

T.

Care to share all of your code for your nav menu.

MonkeyHipsandRice

Sir_Eagle wrote: »

Care to share all of your code for your nav menu.

My code for the menu is now showing up on my page. I thought I had solved the problem but now think I created a new one for me to deal with. If I figure it out I will post it here. Sry for the very late reply.