Support » Theme: Highwind » Menu bar disappears when I hover on it

  • The menu bar disappears when I hover on it.

    The menu bar changes to the same colour as the background and same colour as the links when I hover on it so it looks like the words disappear.

    I want to stop the colour from changing at all or to make it black.

    What code do I add to do this.

    Thanks for all your support during this painful process the website will go live on the weekend so trying to get this all done .

    http://www.mrsgreenjeansplantsseeds.com

Viewing 9 replies - 1 through 9 (of 9 total)
  • Open header and find this line:

    .main-nav ul.menu ul, .main-nav ul.menu > li:hover > a, .main-nav ul.menu > li > a:hover { background:#00cd66; }

    Change #00cd66 to #000000 which should change it to black.

    I found this in the style css

    .main-nav ul.menu li:hover > ul {
    filter: alpha(opacity=@opacity * 100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    overflow: visible;
    visibility: visible;
    -webkit-transform: translateY(0);

    Is this were I change it?

    Nope I think you can find this in header.php .

    not in the header.php

    it says in header

    <?php
    /**
     * The header template.
     * @package highwind
     * @since 1.0
     */
    ?>
    <?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?><?php highwind_html_before(); ?><!doctype html><!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html <?php language_attributes(); ?> class="no-js ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html <?php language_attributes(); ?> class="no-js ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html <?php language_attributes(); ?> class="no-js ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html <?php language_attributes(); ?> class="no-js"> <!--<![endif]-->
    <head>
    
    	<?php highwind_head_top(); ?>
    
    	<meta charset="<?php bloginfo( 'charset' ); ?>" />
    
    	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    	<title><?php wp_title( '/', true, 'right' ); ?></title>
    
    	<!--  Mobile viewport optimized: j.mp/bplateviewport -->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    
    	<?php highwind_head_bottom(); ?>
    
    	<?php wp_head(); ?>
    
    </head>
    
    <body <?php body_class(); ?>>
    
    <?php highwind_body_top(); ?>
    
    <div class="outer-wrap" id="top">
    
    	<div class="inner-wrap">
    
    	<?php highwind_header_before(); ?>
    
    	<header class="header content-wrapper" role="banner" style="background-image:url(<?php echo header_image(); ?>);">
    
    		<?php highwind_header(); ?>
    
    	</header>
    
    	<div class="content-wrapper">
    
    	<?php highwind_header_after(); ?>

    WPyogi

    (@wpyogi)

    Forum Moderator

    CSS is not in the header.php file – it may show up in the generated HTML in the header – in the Custom CSS –

    <!--Customizer CSS-->
            <style type="text/css">
    ...
            </style>
            <!--/Customizer CSS-->

    But that’s not where you would change it.

    HUH???? = Newbie here and now I don’t know what you said.

    Please explain. I have a child theme style.css. But I cannot find what the other person said and now dont know what wpyogi said either.

    Well in that case, you can just add this as it is in your style.css file:

    .main-nav ul.menu ul, .main-nav ul.menu > li:hover > a, .main-nav ul.menu > li > a:hover { background:#000000!important; }

    Nope that code did not work. I put it in my child style.css

    WPyogi

    (@wpyogi)

    Forum Moderator

    The code in the header is likely from a custom CSS plugin? Or does your theme have custom CSS in it?

    What you added has some errors in it because the “greater than” signs got messed up – remove that last piece of CSS and try adding this instead:

    .main-nav .highwind-navigation ul.menu a:hover {
      color: black;
    }

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Menu bar disappears when I hover on it’ is closed to new replies.