site navigation assistance please

Suli

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!

Lille Ulven

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

Suli

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.

Lille Ulven wrote: »

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 Ulven

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

Suli

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.

Lille Ulven wrote: »

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 Ulven

You're welcome Suli - actually you just gave me an idea

Have a great weekend

Lille Ulven

Suli

Excellent!

Cheers,
Suli

Lille Ulven wrote: »

You're welcome Suli - actually you just gave me an idea

Have a great weekend

Lille Ulven