Jump to content

Changing menu hover CSS


VegarHenriksen

Recommended Posts

VegarHenriksen

Hello! Can anyone help me out with what css command to use to change the hover and selected color for the sidebar menu?

image.png.692f028bb0a66de3c17fc9f9deeea8f2.png

Link to comment
Share on other sites

VegarHenriksen

The problem is that the original one has an !important tag

 

.navMenuOption-selected {
    background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2)!important;

 

Link to comment
Share on other sites

arrbee99

Does any of this help - Not sure what half of it does, but it seems to make (most) stuff red -

 

/*Dark Red  - #A30000;*/


/* ---------------------------------------------------------------------------------------------------- */
/* Overall Colour Scheme */


html:root {
    --mycolour: #A30000;
}


/*html:root {
    --myhighlight: #00A3A3;
}*/

html:root {
    --myhighlight: white;
}


html:root {
    --theme-primary-color-hue: 0 !important;
    --theme-primary-color-saturation: 100% !important;
    --theme-primary-color-lightness: 32% !important;
    --theme-accent-text-color: var(--mycolour);
    --theme-primary-color-lightened: var(--mycolour);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}

Link to comment
Share on other sites

VegarHenriksen
12 hours ago, arrbee99 said:

Does any of this help

No, but thanks :)

Link to comment
Share on other sites

arrbee99

Oh well, mine looks like this -

Embycssredandwhite.jpg.9d6bc2cbe18ee55359cb08a61c7ce9f9.jpg

but the trouble is the css I thought that was doing that doesn't actually seem to do anything and I can't find in my disorganised mess that does. So not much help, as usual.

Link to comment
Share on other sites

beckfield

For the hover color, this seems to work:

 .navDrawerListItemBody:hover {
      background-color: red;
  }

Haven't figured out the 'selected,' but you have a few choices for this in the Settings > Display > Accent Color option.

image.png.4a804fe9914b81e2941b704bfbdf5963.png

Link to comment
Share on other sites

VegarHenriksen

removing "body" works - thanks

 .navDrawerListItem:hover {
      background-color: #1b1b1b !important; }

 

Link to comment
Share on other sites

VegarHenriksen

Selected in red is an issue because of the !important tag when you use red as an accent

image.png.103320ecd4bb9a9206542c1c9eeeb51c.png

Edited by VegarHenriksen
Link to comment
Share on other sites

visproduction
.drawer-open .navDrawerListItemBody:hover {
    background-color: #517288;
    border-radius: 0.6em;
}

 

Hamburger menu pull out hover color.jpg

Link to comment
Share on other sites

  • 2 weeks later...
VegarHenriksen

Got it

 

.drawer-open .navDrawerListItem:hover {
    background-color: #1b1b1b !important;
    border-radius: 0.6em;}

.listItem-hoverable:hover .listItem-content-bg::before {
display: none !important;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...