Title: Need help with Navigation HOVER CSS problem Last modified: August 21, 2016 --- # Need help with Navigation HOVER CSS problem * Resolved [artifice-design](https://wordpress.org/support/users/artifice-design/) * (@artifice-design) * [12 years, 3 months ago](https://wordpress.org/support/topic/need-help-with-navigation-hover-css-problem/) * Okay, I am having a problem editing the Navigation on a Template I am installing. The Navigation has a Hover effect and I want to remove it entirely. However, despite editing the CSS in the style sheet I cannot get the hover effect to vanish. I have spent a couple of days on this now and wonder if there is something simple that I am missing! My fear is that the hover effect is hard-coded somewhere in the php files, which is why I cannot edit it via the CSS. * Can anyone take a quick look at the code and let me know if you spot anything obvious? * Firstly, my test page is up at: * [http://capecodscenterforpersonalevolution.com/test/](http://capecodscenterforpersonalevolution.com/test/) * When you hover over the Navigation you will see a Blue line appear above the menu items. It is THAT blue line I want to remove. * I am using Coller Pro as a Theme. * The original CSS in the template was: * ``` /* =Menu ----------------------------------------------- */ .main-navigation { clear: both; display: block; float: left; width: 100%; margin-bottom: 0px; } #nav-container { width: 974px; margin: auto; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; } .main-navigation a { display: block; text-decoration: none; color: #555; text-decoration: none; padding: 20px 20px; font-weight: bold; } .main-navigation a:hover { background: #f3f3f3; border-top: #0C9 solid 4px; padding-top: 16px; } /* .main-navigation .current_page_item > a { background: #ddd; border-top: solid 3px #222; padding-top: 17px; } */ .main-navigation ul ul { /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);*/ display: none; float: left; position: absolute; top: 4.0em; left: 0; z-index: 99999; background: #f3f3f3; } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { width: 200px; font-size: 14px; font-weight: normal; color: #555; padding: 8px 20px; font-weight: 400; } .main-navigation ul ul a:hover { border-top: none; background: #333; color: #eee; padding: 8px 20px; } .main-navigation ul ul li { } .main-navigation li:hover > a { color: #333333; } .main-navigation ul ul li:hover > a { background: #333; border-top: none; padding: 8px 20px; color: #eee; } .main-navigation ul ul :hover > a { } .main-navigation ul ul a:hover { } .main-navigation ul li:hover > ul { display: block; } .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a { } .td_mobile_menu_wrap { padding: 15px 25px; text-align: center; } ``` * I have since changed the relevant hover section to… * ``` .main-navigation a:hover { padding-top: 16px; } ``` * …but still that blue line appears! It is driving me a little crazy. 🙂 * Can anyone see what I am doing wrong or offer a suggestion as to where the problem might lie? * All replies appreciated, Mark Viewing 5 replies - 1 through 5 (of 5 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 3 months ago](https://wordpress.org/support/topic/need-help-with-navigation-hover-css-problem/#post-4566429) * Install this Custom CSS Manager plugin [http://wordpress.org/plugins/custom-css-manager-plugin](http://wordpress.org/plugins/custom-css-manager-plugin) * Then use its “CSS Code” [section of the dashboard](http://wordpress.org/plugins/custom-css-manager-plugin/screenshot-1.jpg?r=704634) to hold your CSS modifications. That means creating new styles that overrides old ones. * [batharoy](https://wordpress.org/support/users/batharoy/) * (@batharoy) * [12 years, 3 months ago](https://wordpress.org/support/topic/need-help-with-navigation-hover-css-problem/#post-4566448) * ``` .main-navigation li:hover > a { border-top: none; } ``` * Thread Starter [artifice-design](https://wordpress.org/support/users/artifice-design/) * (@artifice-design) * [12 years, 3 months ago](https://wordpress.org/support/topic/need-help-with-navigation-hover-css-problem/#post-4566457) * Thanks, I just tried that but still get the blue line appearing… * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 3 months ago](https://wordpress.org/support/topic/need-help-with-navigation-hover-css-problem/#post-4566555) * Did you resolve this? * Thread Starter [artifice-design](https://wordpress.org/support/users/artifice-design/) * (@artifice-design) * [12 years, 3 months ago](https://wordpress.org/support/topic/need-help-with-navigation-hover-css-problem/#post-4566556) * I marked the question resolved yesterday. * None of the posted solutions worked, so I went back in and tried rethinking the problem. In the end what seemed to be happening was that the Theme’s built-in colour options (accessible via a pane in the WordPress front-end) was overwriting my CSS in the Style Sheer. So, as a last resort, I turned off all the in-built colour options. That seemed to force WordPress to look to the Style Sheet for information on how to format the Nav, and subsequently my CSS took over. So, it now works. 🙂 * Thanks for the help, I did grab the Plug-in you highlighted and am using this for other features – very useful. Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Need help with Navigation HOVER CSS problem’ is closed to new replies. * 5 replies * 3 participants * Last reply from: [artifice-design](https://wordpress.org/support/users/artifice-design/) * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/need-help-with-navigation-hover-css-problem/#post-4566556) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics