Menu item hover CSS

[Stephen_Peters]

On the whole tweaking the Weebly CSS has been straightforward, but I've run into something I can't seem to fix.

I'm working on an educational site and the client would like to have the background of menu items to have a hover state.

https://ptldev.weebly.com/

Pulling from other community posts:

#wsite-menus .wsite-menu li a:hover {
    /* Change menu link background to brand green and font color to brand yellow */
    color: #ffdd03;
    font-weight: bold;
    background: #00634d;
}

I can't seem to get the background of the list items to change. What am I missing?

[PaulMathews]

@Stephen_Peters Where did you place this css?

[Stephen_Peters]

In main_style.css, edits made within the weebly theme editor.

My additions are between the Font and General Structure sections.

There's a lot of CSS in this file.  I can't do it tonight, but perhaps I should copy & paste it all into an editor with a much bigger window just to look at it.

[PaulMathews]

@Stephen_Peters Your Weebly theme may have multiple css files each targeting a different area of the site. When I look at the css on the front-end, I don't see your code at all. Here's the css file:

https://ptldev.weebly.com/files/main_style.css

Do a search for "#wsite-menus .wsite-menu li a:hover" to find the navigation link hover styling. The css that's there is not the same as the css you've noted here.

An alternate way to add css (without having to root through multiple css files in the Code Editor) is to do it in the Header Code zone of the site SEO settings: In the Site Editor, click Settings > SEO > Header Code and add your css there (encapsulated between opening and closing style tags).

[Stephen_Peters]

I've done my share of CSS, but there's always more to know.  I'm also still relatively new to Weebly and it's quirks, this is the first Weebly project I've worked on.  The project has been tooling along slowly over six months, so do something, go back and do something else a few weeks later.  Easy to leave a shoe hanging...  The theme I'm using came from the short list of default themes provided by Weebly.  Bought some plug-ins, but to make things easier for the client down the line have worked to minimize stuff they can't do with the simple point'n'click.  So it's largely pretty stock.

There's no other CSS files listed under "assets".   Other than the commercial plug-ins, I don't know how other stylesheets would be sneaking in.  I'm not familiar with how Weebs does it, but I suspect the admin tool pre-processes everything before it's presented to the browser.

I just now went in, copy 'n' pasted the exiting main_style.css to a local text editor, which can be found here: https://tikimojo.com/tmp/DMG/start-main_style.css

I removed my previous efforts to set the menu hover states, added the menu styles from the messages above and now we have this: https://tikimojo.com/tmp/DMG/main_style.css

From this I get curious results.  In the Weebly editor, the submenu items now have a hover state: https://tikimojo.com/tmp/DMG/ptl_hover.mov

But at http://ptldev.weebly.com they do not.  Tried other browsers, dumping the cache... same thing.

The client would like us to get to where the main menu items have a hover, like the site we are replacing: https://tikimojo.com/tmp/DMG/old-site-hover.mov

... and a hover background color for the sub-items.  This should be pretty simple, but it's clear something is stomping on something else, somewhere...