CSS error: Menu hover glitch concealed

I'm currently facing an issue with the navigation on my website. Whenever I place a logo image above the menu, the hover effect of the menu stops working correctly. To clarify: the background doesn't change on hover, but the border does. Here are some examples:

Above:

With logo:

The desired outcome:

CSS:

#simple-menu{display: block;float: right;background:rgba(0, 0, 0, 0.5);padding: 15px 20px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin-top: 1.5%;}
#simple-menu{ display:none;}
.pad_menutitle{padding: 5%;width: 90%;background: #2dcb73;}
.pad_menutitle span{display: inline-block;float: right; cursor:pointer;}

/* More CSS properties and rules here */

You can find additional CSS code for styling in the provided snippets.

HTML:

<div class="header4">
    <div class="center">  
    <!--LOGO START-->     
    <div class="logo">

            <center><img src="logo.png"></center>

    </div>
    <!--LOGO END-->  

    <!--MENU START--> 
        <!--MOBILE MENU START--><a id="simple-menu" href="#sidr"><i class="fa-align-justify"></i> <?php _e('Menu' , 'asteria'); ?></a><!--MOBILE MENU END--> 
    <div id="topmenu"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?></div>
    <!--MENU END-->

    </div>

</div>
htmlwordpresscss

Answer №1

Line 47 in your style.css is showing:

body .header4 .bigmenu ul li:hover{ background:none!important; }

Please move line 41 -

.header4 #topmenu ul li:hover{background:rgba(174, 215, 211, 0.2) !important;border-bottom: 3px solid #2dcb73;}

Below that line and remove the use of !important

The corrected version should look like this 

body .header4 .bigmenu ul li:hover{ background:none;}
.header4 #topmenu ul li:hover{background:rgba(174, 215, 211, 0.2);border-bottom: 3px solid #2dcb73;}

If you prefer to keep the hover background, feel free to delete line 47.

Answer №2

To update your website's top menu alignment, change 

#topmenu{ float:left; padding-top:40px;}
to 
#topmenu{ text-align:center; padding-top:40px;}
in your style.css file.

If you want to add an active background effect similar to hover, simply remove the following CSS code from your style.css:

.header4 .current-menu-item {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
}

and replace it with:

.header4 .current-menu-item {
    background: none repeat scroll 0 0 rgba(174, 215, 211, 0.2);
    border-bottom: 3px solid #2DCB73;
}

To eliminate any effects on the active element, set background:none; in your style.css like so:

.header4 .current-menu-item {
        background: none;
    }

I also visited the URL And found that on line 67 in style.css, you should modify the .logo CSS to:

.logo {
    padding-top: 20px;
    text-align: center;
}

Furthermore, at line 41 in style.css, replace the existing code with:

.header4 #topmenu ul li:hover {
    background: none repeat scroll 0 0 rgba(174, 215, 211, 0.2) !important;
    border-bottom: 3px solid #2DCB73;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prioritize the Menu display

Is there a way to bring the menu's black background in front of the body text in the image below? Here is the JSFiddle link for reference: https://jsfiddle.net/johnking/j58cubux/6/ The issue occurs when scrolling down and the menu is not clearly vi ...

htmlcss

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

javascripthtmlcanvasadobe-animate

Are you a fan of Ajax calls using JSON or HTML?

Which method is most recommended for implementing AJAX? If you were developing a search page using PHP and Jquery for the AJAX calls, how would you manage the response? a) Would you prefer to have the response include all relevant HTML and styling? or ...

jqueryhtmlajaxjson

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...

javascripthtmlreactjstypescriptwebpack

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

htmlcssstylesheet

CSS position: sticky not keeping search bar at the top of the page

I'm having trouble getting a search bar to stick at the top of a div using position: sticky. I've checked for common issues like overflow: hidden on parent elements without specified height, but that's not the problem in this case. Here&apos ...

cssreactjscss-position

javascript Href and onclick malfunctioning

I am encountering an issue with a form on my webpage: <form name="myForm" id="myForm" method="post" action="someUrl.php"> ... </form> There is a div outside of this form which contains an anchor link: <a href="anotherUrl.php" onclick="doc ...

javascriptphphtml

What are the steps to turn off the rule .MuiInputBase-inputType-121 in Material UI TextField for email input field because of a display problem?

Here is a snippet of JSX code: import TextField from '@material-ui/core/TextField/TextField'; <Col xs={6}> <TextField pattern=".{3,}" name="fullName" ...

javascripthtmlcssmaterial-uimui

Developing an animated feature that displays a dynamic count up to the current size of the browser window

I have a script that's able to determine the height and width of my browser window. However, I am facing a challenge in creating a way for these dimensions to count up from zero to their current values upon loading. The desired functionality would be ...

javascriptjqueryhtmlcss

Enhance your images with Jquery thumbnail zoom feature

I am in the process of creating color swatches for clothing items, using them as a reference point. http://jquery.malsup.com/cycle/pager7.html Take a look at the thumbnails on the webpage mentioned above. My goal is to display these thumbnails without re ...

jquerycssimage-processing

Confirm that the CSS syntax is valid

Is there a way to validate CSS syntax by checking for specific characters like "{", "}", ";", and ":"? I have come up with four checks to ensure the code is valid, such as verifying that the number of opening and closing curly braces match, as well as the ...

cssregexvalidation

Ways to improve the transition of a <video> background using CSS

My webpage features a unique 10-second video wallpaper achieved using only pure CSS. Below is the code I used: <style> video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; he ...

csshtmlhtml5-video

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Is there a method to use CSS to create a green shadow in that particular shape? ...

cssshadows

When you click on an anchor tag, the divs do not automatically move to the top of the page

Encountering an issue with a rather straightforward website. It consists of a vertical scroll with a left side navigation. Whenever I click on a menu item, it fails to bring the corresponding section to the top of the page. I've experimented with a fe ...

htmlcssnavigationanchor

React-select: issue with maintaining selected option on input

Hello everyone, I am new to React and seeking some assistance in reviewing my code. I have a component called Bucket that contains multiple challenges as separate components. Here is a simplified version of the code: class CLL_Bucket extends Component { ...

javascripthtmlreactjsreact-select

Adjusting the length of the To, CC, and BCC text fields in web design

I'm developing a webpage that will collect email addresses for user notifications. I want to ensure the length limits of the 'to,' 'cc,' and 'bcc' fields. According to RFC 2821/3696, an email address can be up to 256 cha ...

htmlwebhtml-email

What are the best methods for ensuring a website maintains consistent visibility across all different screen sizes?

Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques. For instance: When viewing the website on a 360 ...

javascripthtmlcssfrontendweb-deployment

The HTML head JavaScript files are not applicable to dynamic Bootstrap modals

I have broken down my PHP files into smaller parts, for example, tillbody.php contains everything from the HTML tag to the body tag, followed by navbar.php and so on. I am including these files in index.php. Here is the code for a better understanding: &l ...

phpjqueryajaxhtmlpdo

Unusual Blank Space in HTML CSS Design

While working on my website, I noticed a peculiar white space appearing at the bottom of the page, but only when using Internet Explorer. Safari looks fine. I am currently using IE8. I would like the white background to end after the black navigation link ...

htmlcss

Tips for preventing Razor from interpreting special characters as HTML code

I'm encountering an issue with special characters displaying as HTML codes on the page I'm working on. The content is retrieved from a database and shown in readonly input boxes. For example, & is displayed as &. How can I ensure that the ...

htmlasp.net-mvcrazor