Sub navigation background colour

I have a website where the nav bar is pretty much how I want it, but on the Contact page https://www.maryannerudy.com/contact.php I am puzzled as to why the sub menu “Previous Works” under Gallery has a goofy green background. It does not have that colour if you hover over it on any other page but on the Contact page. I have looked at every setting and can’t find that colour anywhere. How do I make it go away? … I do not want a coloured background.

TIA

I see what you mean. I guess a quick fix is assuming that you are not suing the Nav bar in a partial is to remove the Nav Bar from the gallery and contact page and copy it from your blog page.

To get rid of it you can add this CSS snippet to that page css container:

.dropdown-menu li>a:hover {
    background-color: transparent;
}
1 Like

I don’t understand how to do that, but I have moved it because even the solution from indridcold (which does function properly on other pages) did not work on the Contact / Previous Works page.

Thanks for the code! It works on other pages, but not the Contact / Previous Works page. I changed the ‘transparent’ to ‘black’ just to test it, and the Previous Works hover was then black on all pages it is on except the Contact page, which stubbornly remains that goofy green. I have temporarily moved the Previous Works page to the main nav, eliminating the sub nav altogether until I can figure this out.

@yabdab I am looking on your site for the FormLoom 4 Helper Stack but am not seeing it. Do you think that would solve the problem? I can send you my project file if that helps you to see what is going on. Long and short of it is, from any and all FormLoom 4 page I create, the dropdown menu of any page that is a subpage of any other page has a weird green background that I cannot get rid of, or override wth the code
.dropdown-menu li>a:hover {
background-color: transparent;
}
that I got from indridcold which works for every other page. I have tested this by changing ‘transparent’ to ‘black’ and all the other subpage nav items then have the black background, but when accessed from a FormLoom 4 page, the background is green.

The helper stack link is right below the download free demo button.
DOWNLOAD Resources (including Helper Stack)

Im on my iPad, but I don’t see any drop-down menu items? Are they on the top menu? They don’t have any indication (down arrow) and they don’t seem to work with touch.

1 Like

I think the OP changed the page and republished so I can’t see the original problem anymore either.

Pretty sure if we’d been able to re-examine the page it would have been possible to pinpoint where the unwanted style is coming from.

1 Like

Sorry @teefers and @indridcold … I have put it back to the way it was with the sub menu. Thanks for the help. https://maryannerudy.com/contact.php

The Formloom CSS file loads after the main CSS file and therefore has precedence over everything in the main CSS. You can add the !important directive to force it.

.dropdown-menu li>a:hover {
    background-color: transparent !important;
}

I don’t have Formloom, but there may be a way to change that color. If not, then @yabdab may want to scope their CSS so it only applies to the form.

1 Like

Perfect. Thank you, that !important directive fixed it. I appreciate that. :slight_smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.