Create Horizontal submenu for nav bar

mbridge87mbridge87 Registered Users Posts: 85 Big grins
edited March 4, 2014 in SmugMug Customization
Hello,

I can't seem to find this anywhere on the forum, I've been searching for some time. I'd like to make my submenus vertical rather than horizontal.

This is my site, which I've only just begun building/tearing apart today and starting again...

http://www.maxbridge.co.uk/


If anyone has a chance it would be amazing if they could answer my question on this thread as well.

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

Thanks!

Comments

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited March 3, 2014
    mbridge87 wrote: »
    Hello,

    I can't seem to find this anywhere on the forum, I've been searching for some time. I'd like to make my submenus vertical rather than horizontal.

    This is my site, which I've only just begun building/tearing apart today and starting again...

    http://www.maxbridge.co.uk/


    If anyone has a chance it would be amazing if they could answer my question on this thread as well.

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

    Thanks!
    Can you describe vertical? They look that way now to me.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • mbridge87mbridge87 Registered Users Posts: 85 Big grins
    edited March 3, 2014
    Allen wrote: »
    Can you describe vertical? They look that way now to me.

    Sorry I meant horizontal not vertical...oops

    So, have the sub menus horizontal so they don't cut into the slideshow


    Thanks for the fast reply
  • Smug EricSmug Eric Registered Users, Retired Mod Posts: 333
    edited March 3, 2014
    Adding this to a CSS content block should do it:

    .sm-page-widget-nav-horizontal li {
    display: inline-block;
    }
    Eric
    Support Hero and Customeister
    http://www.smugmug.com/help
  • mbridge87mbridge87 Registered Users Posts: 85 Big grins
    edited March 4, 2014
    Smug Eric wrote: »
    Adding this to a CSS content block should do it:

    .sm-page-widget-nav-horizontal li {
    display: inline-block;
    }

    Hello Eric and Allen,

    Thank you both so much for your help. I really appreciate it.

    I always try to figure things out myself before coming here and bothering you but again I'm stuck. I suppose CSS is not just something I can figure out in a morning.

    I'd like to make two more changes to that bar.

    1) I'd like the submenu to be centered underneath it's parent. So Galleries for example would have location beneath it and the other two either side.

    2) I'd also like to adjust the height of the submenu, make it a little thinner.


    I've tried doing both and I'm getting somewhere with the height but when I adjust it the text stays in the same place. The box gets thinner and the text is then at the bottom rather then in the middle, which doesn't look good.

    Any help would be wonderful
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited March 4, 2014
    mbridge87 wrote: »
    ...
    2) I'd also like to adjust the height of the submenu, make it a little thinner.


    I've tried doing both and I'm getting somewhere with the height but when I adjust it the text stays in the same place. The box gets thinner and the text is then at the bottom rather then in the middle, which doesn't look good.

    Any help would be wonderful
    This is what I have in my CSS 
         /* shorter menu drop buttons */
.yui3-menu-item>.yui3-menu-label {
  [COLOR=Red] padding: 1px 46px 1px 22px;[/COLOR]  /* [COLOR="Red"]Top[/COLOR] L [COLOR="Red"]bottom[/COLOR] R */
   border-width: 0 0 1px;
   border-style: solid;
}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • mbridge87mbridge87 Registered Users Posts: 85 Big grins
    edited March 4, 2014
    Hi Allen,

    Thanks so much for your help with that! Your a life-saver.

    ....if you have a chance I've submitted something else...

    http://www.dgrin.com/showthread.php?t=245665
Sign In or Register to comment.