Navigation Bar on side of page like I saw on Aaron Meyers website.

JMJMNJMJMN Minnesota, Unites StatesPosts: 11Registered Users Big grins

I was searching for CSS customizations and I came across Aaron Meyers page with a ton of great customizations, but the thing that really caught my eye is how his menu/nav bar is on the side of his page, how is this done? Is there a tutorial someplace? Thanks to everyone!

Comments

  • leftquarkleftquark SmugMug Product Team Posts: 3,442Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited March 7, 2019

    I started with the "Arrow" design, which has the sidebar already placed on the left, and used the "Menu" Content block, set to a "Vertical Bar" to achieve that. If you don't want to start a new design you can:

    1. Click "Customize" and then "Content and Design"
    2. Make sure you're on "Entire Site"
    3. Choose the "Layout" tab.
    4. Under "Margins", set the Side Margin to whatever you desire (I set mine to 25px)
    5. Under "Sidebars", set "Left" to ON (I set mine to 225px wide)
    6. Click on the "Content" tab
    7. Under "Navigation", drag/drop a "Menu" content block into the new left sidebar.
    8. Customize your menu as you'd like
    9. Publish
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • MeflaMefla BangalorePosts: 5Registered Users Big grins

    Hello Experts,

    I was following the above steps to create a vertical bar with menu on it which I am able to do it. But in Aaron Website, There is a space between the vertical bar and the left screen. How can we implement this ?Kindly help.

    Thanks

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,237Registered Users Major grins

    @Mefla said:
    Hello Experts,

    I was following the above steps to create a vertical bar with menu on it which I am able to do it. But in Aaron Website, There is a space between the vertical bar and the left screen. How can we implement this ?Kindly help.

    Thanks

    I just installed 'Arrow' and followed the instructions and there was no space to the left. He forgot to add the Margins. So go to 'Entire Site > Layout > Margins'. Set the side margins to suit.

    If you need more help, you'll need to post your site.

  • leftquarkleftquark SmugMug Product Team Posts: 3,442Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    Updated my post to add the Margins

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.