site navigation assistance please

SuliSuli Registered Users Posts: 6 Big grins
edited February 6, 2016 in SmugMug Support
Hi all,

I'm trying to make a few changes to my navigation. I really like the navigation on this site (http://www.digitalatelier.ro/#/work). I like how the color change occurs when you mouse over the nav menu and the little bar that stays on the bottom of the menu bar on the active page. Can anyone help me do something like this?

My page is www.envography.com


I've not done any tweaking like this in years so any help is appreciated!

Comments

  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited February 6, 2016
    Hi Suli.

    You would need to add a CSS box on "entire site"-level and use something like this:
    /* Make the menu nav bar text for the active page a different color */
    .sm-page-widget-nav-activepage > a {
      /*color: red !important;  would change the text-color to red */
      border-bottom: red 5px solid !important; /*Should add a red 5x wide border on the bottom of your active link*/
    }
    
    /* Make the menu nav bar hover text for the active page a different color */
    .sm-page-widget-nav-activepage > a:hover {
      /*color: #f2ef35 !important; would change the text color on hover to something different*/
      background-color: red !important; /* would change the color of your field to red when hovering over */
    }
    
    

    Which I think should work as desired. I am using the color-entries on my page, in case you want a look.

    Good luck

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • SuliSuli Registered Users Posts: 6 Big grins
    edited February 6, 2016
    Thank you so much! Almost exactly what I want, just need a couple small changes if possible and greatly appreciated.

    This code makes it so when I click a link, it adds the red bar underneath the menu item page, and when you hover above the active page nav selection, there is a red change of color on the menu. It doesn't apply a color change on hover as I scroll over other nav menu options.

    What I'd like is for nav menu to change color on hover as I scroll over the different menu items. If I could also make the box area around the nav menu larger on the hover color change, that would be great. Similar to this website (http://www.alluvionbc.com/about.html). The color change area covers the box area between the nav menu separators. And I think there is a change of nav text color that happens also when you hover over it.
    Hi Suli.

    You would need to add a CSS box on "entire site"-level and use something like this:
    /* Make the menu nav bar text for the active page a different color */
    .sm-page-widget-nav-activepage > a {
      /*color: red !important;  would change the text-color to red */
      border-bottom: red 5px solid !important; /*Should add a red 5x wide border on the bottom of your active link*/
    }
    
    /* Make the menu nav bar hover text for the active page a different color */
    .sm-page-widget-nav-activepage > a:hover {
      /*color: #f2ef35 !important; would change the text color on hover to something different*/
      background-color: red !important; /* would change the color of your field to red when hovering over */
    }
    
    

    Which I think should work as desired. I am using the color-entries on my page, in case you want a look.

    Good luck

    Lille Ulven
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited February 6, 2016
    Sorry, my mistake, I didn't check my code well enough, try this instead of the second block of css:
    .sm-page-widget-nav-toplink > a:hover {
      /*color: #f2ef35 !important; would change the text color on hover to something different*/
      background-color: red !important; /* would change the color of your field to red when hovering over */
    }
    

    So for the last block change "activepage" to "toplink"

    Good luck

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • SuliSuli Registered Users Posts: 6 Big grins
    edited February 6, 2016
    Awesome, that did the trick! Also, I didn't realize you had the code for the text color change in the original, just star'd out. Working great now, thank you for the help.
    Sorry, my mistake, I didn't check my code well enough, try this instead of the second block of css:
    .sm-page-widget-nav-toplink > a:hover {
      /*color: #f2ef35 !important; would change the text color on hover to something different*/
      background-color: red !important; /* would change the color of your field to red when hovering over */
    }
    

    So for the last block change "activepage" to "toplink"

    Good luck

    Lille Ulven
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited February 6, 2016
    You're welcome Suli - actually you just gave me an idea :)

    Have a great weekend

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • SuliSuli Registered Users Posts: 6 Big grins
    edited February 6, 2016
    Excellent!

    Cheers,
    Suli
    You're welcome Suli - actually you just gave me an idea :)

    Have a great weekend

    Lille Ulven
Sign In or Register to comment.