How to change the color of menu icon I hover over?

0
Hello, I'm looking to change the background color when hovering over my navigation icons. Can anyone tell me which element I should target in my stylesheet.scss? Additionally, how can I position icons above text, and how do I adjust their size?    Mendix version 10.10.0
asked
1 answers
1
div.mx-navigationtree div.navbar-inner ul li a[role="menuitem"]:hover{

  background-color: whatever-color-you-want

}

But it is better to use the variable that Mendix has made available for you. To find that variable, go to this file "\themesource\atlas_core\web\core\widgets\_navigation-bar.scss" and you will see

image.png

 

You can find the current value of $navigation-bg-hover by looking for it in \themesource\atlas_core\web\_variables.scss

// Default Navigation styling
$navigation-bg: $brand-inverse !default;
$navigation-bg-hover: lighten($navigation-bg, 4) !default;
$navigation-bg-active: lighten($navigation-bg, 8) !default;

 

To change that value of navigation-bg-hover, see the text in the header of that file:

// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.

Meaning: if you want to change navigation-bg-hover  to something other than "lighten($navigation-bg, 4) !default;", you need to do so in a separate file _custom.scss (or if you want :hover to differ from :focus and :active)

.navigation-bg:hover
  {
    background-color: blue
  }

and include _custom.scss in main.scss by adding:

@import "custom";

 

Actually if you are fine with navigation-bg-hover being just a lighter version of navigation-bg, you only have to change the value of navigation-bg in a file called custom-variables.scss and include that in main.scss.

 

 

answered