Lost navigation hover effect when media size decreases

I followed a tutorial to create a responsive navigation menu that was working perfectly here:

After adding a logo and some additional elements, I noticed that the hover effect was missing when the media size changes, which can be seen here:

I suspect the issue lies in this section, but I can't quite pinpoint it:

HTML:

<ul class="nav hidden">

CSS:

ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}

ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`

If necessary, I am willing to share the complete HTML/CSS code.

htmlcss

Answer №1

An issue arises when the #header and #navbar have fixed height values, while the .nav elements are floated left due to the nav class being applied.

To resolve this, ensure that the #header and #navbar have height:auto set for the mobile version. Additionally, consider adding overflow:hidden to the #navbar or removing the float:left from the .nav.

The main issue identified was that the .full-width element was covering the open menu, causing it to block mouse events.

Answer №2

One specific guideline found in line 81 of your CSS pertains to widths less than 759px:

ul.nav {
    position: static;
    display: none;
}

What's missing is a hover rule that overrides the display: none property. To address this, consider adding the following rule directly below the one mentioned above:

#navbar:hover ul.nav {
    display: block;
}

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

"Utilizing JavaScript, you can remove an element by clicking on the outer element within the

I need the functionality where, when a user clicks on an input type="checkbox", a corresponding textarea is displayed. Then, if the user clicks anywhere except for that specific textarea, it should be hidden. Can someone assist me with implementing this fe ...

javascripthtmljquerycss

Bootstrap: Problem arises when columns do not total up to 12 and are pushed onto separate rows

So, I've been working with Bootstrap to structure columns and rows. It seems like I have the container, rows, and columns set up correctly for each post. However, I am puzzled as to why a new row is created for every post I make, causing them to stack ...

htmlcsslaravelbootstrap-4

Displaying the number zero in TYPO3 Fluid without it being empty or NULL

Within my TYPO3 Fluid template, I am encountering an issue where I need to display a value only if it is not empty. Currently, my approach is as follows: <f:if condition="{myvalue}"> <div class="myclass">{myvalue}</div> </f:if> Th ...

htmltypo3fluid

Displaying an array using Javascript that contains variables along with HTML code

First of all, thank you for your help and support! I am struggling with correctly outputting HTML code with variables using jQuery and jQuery Mobile. I receive results from a PHP database, separated by "," and converted into a JavaScript array successfull ...

javascripthtmlarraysvariablesoutput

Unable to center text within a CSS div rotated 90 degrees due to width limitations caused by rotation; solution involves utilizing flexbox

Currently, I am working on creating a tab positioned on the right side, as illustrated in the image below: https://i.sstatic.net/QGTEB.png The desired width for the tab on the right is only 25px. To achieve this layout, I am utilizing flexbox for the cont ...

htmlcss

Use the "webkit-keyframes" exclusively within the specified id

Is there a way to exclusively apply the "webkit-keyframes" within the #progress1 id? I have another progress bar (#progress2) on the same page with a different webkit-keyframes, which is why I need this distinction. #progress1 { background: white; / ...

htmlcss

CSS and JavaScript issues causing compatibility errors with Internet Explorer

Recently, I've been working on a portfolio website just for fun, and I'm encountering compatibility issues specifically in Internet Explorer. Surprising, right? The issue seems to be stemming from the flipcard.css and flipcard.js files. While oth ...

javascripthtmlcssinternet-explorer

Inquiring about CSS classes for numerous elements

table.rightlist td { text-align:right; } table.rightlist th { text-align:right; } This code snippet is intended to align both the table cells (td) and headers (th) to the right within a table with the "rightlist" class. However, upon testing the ...

css

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

Can anyone help me with an issue I am facing with a Bootstrap button? Despite using only the btn btn-default classes, when inspecting it in Chrome, multiple classes are being displayed on the button. I'm unable to figure out why this is happening and ...

javascripthtmlangularjstwitter-bootstrap

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

htmlxpathsiblings

Is there a way to activate the autoplay feature for this?

I'm really new to Jquery and most of this code isn't mine, I'm just using it as a learning tool for creating sliders. If someone could give me some guidance on how to make this slider work automatically when the page loads, that would be gre ...

javascriptjqueryhtmlcss

What is the best way to make a DIV box span the entire webpage without overflowing to the left?

I am currently working on a client's website and running into some issues with the layout of the booking page. The address is supposed to be on the left side, the contact form on the right, and both should be contained within a white box that fills th ...

htmlcss

Printing the selected value from a drop-down box in HTML with JavaScript

I'm in the process of creating a web page structured like this: <html> <head> <title>Bug UI</title> </head> <body> <script> function myfunc() { //what should I include here?? } </script> <form> ...

javascripthtml

What is the best way to showcase the values linked to their corresponding ids in a table?

With the query below, I am joining two tables using the order_id and displaying all the values from the user_orders table. My goal is to only display the order_Id rows that match the order_manager table, as shown in the image below. public functio ...

phphtmlmysql

Building a set of multiple choice questions with the flexibility to include two or more options using bootstrap

If you visit https://getbootstrap.com/docs/4.0/components/forms/, you can find code that allows you to create a multiple-choice question with only one choice allowed using the following snippet: <div class="form-check"> <input clas ...

htmlbootstrap-4survey

Troubleshooting issues with drawing images on HTML5 canvas: experiencing unexpected outcomes

As I am diving into learning how to use the HTML5 canvas element, I have had success in drawing rectangles, utilizing getImageData, manipulating pixels, and then using putImageData to witness the color changes of the rectangles, among other capabilities. ...

htmlcanvasdrawimage

Creating a custom JavaScript clock based on stored database values

I am looking to create an analog clock using JavaScript. I have both working hours and off hours stored in a database. My goal is to display working hours in one color and off hours in another color on the clock. How can I achieve this? The database prov ...

javascriptjqueryhtml

While continuing to input text, make sure to highlight a specific element from the search results list

Currently, I am using a customized search feature in my React.js application. I am looking for a way to focus on an element within the search results so that I can navigate using arrow keys. At the same time, I need to keep the input field focused to conti ...

javascripthtmlreactjsnext.js

adding new data rows to an existing data list using Angular

I am currently working on displaying data from a backend system. The data is coming from a table that receives new rows within a specific time frame. To retrieve these new rows, I have set up a mechanism using an Angular timer. My query pertains to the tem ...

jsonhtmlangulartypescript

How can I achieve an endless scrolling text effect within a square on a webpage using CSS?

My header currently displays a horizontal infinite scroll of text, but I am looking to achieve a square pattern wrapping around the page. Can you provide guidance on how this can be accomplished? Below is the code snippet I am working with: .marquee { ...

htmlcss