The CSS menu dropdown fails to function properly on desktop view when there is longer content present

I attempted to merge two different navigation bars, one sticky and the other responsive.

The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

Currently, it seems to be functioning well. Refer to the example below.

function myFunction2() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
... ... [omitted for brevity] ...

However, upon scrolling down with added content making it longer, the dropdown caret appears to not be working on desktop devices.

I tried searching for similar issues on Stack Overflow, but couldn't determine the root cause of this problem.

CSS dropdown with caret

HTML and CSS caret dropdown menu

CSS Dropdown Menu issue

Can someone please provide assistance?

Expected :

https://i.sstatic.net/0K880.png

Problem :

https://i.sstatic.net/3LZyQ.png

javascripthtmlcss

Answer №1

#navigation {
    background-color: #333;
}

When the #nav stands alone without any additional classes, the overflow: hidden; property doesn't cause any issues.

However, when scrolling down and the .sticky class is applied to #nav, the overflow: hidden; rule becomes problematic. The reason for this is that when .sticky is set to fixed with a width of 100% but no height specified, it results in the content of .dropdown-content being present but not visible due to overflow from #navbar.sticky.

function myFunction2() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
#navbar .topnav {
  overflow: hidden;
  background-color: #333;
}

#navbar .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  ...
...

Answer №2

Adjust the placement of the dropdown menu.

dropdown-content : relative;

Make sure the CSS is updated to properly position the dropdown menu. Currently, when the dropdown is clicked, its position may not be ideal in relation to the window. This causes the content to only be visible after scrolling up.

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

Attempting to ensure that my website is fully optimized for all devices and

I am currently facing an issue with my CSS code on iPad. I want to change the background-image displayed based on whether the user is using an iPad or not. Specifically, I want to use headerold.jpg as the background-image for iPads while keeping headernew. ...

css

Getting the current URL in InApp browser on Phonegap 3.0: A quick guide

Hey there, I am having trouble retrieving the current URL of an in-app browser when clicking the close button or at any time after loading a URL. Here's my code: var ref = window.open('http://google.com', '_blank', 'hidden=y ...

javascriptandroidioscordovacordova-3

CSS: Experimenting with creating a hover effect that lifts the box upwards

Hey there! I'm currently working on adding a red hover box for my Menu. The issue I am facing is that the hover box is displaying below the menu line. I am attempting to adjust the hover box to move a bit higher or up. You can view the image here: ht ...

cssmenuhover

Using Javascript to apply styling only to the first class element in the document

I am facing a challenge with styling programmatically generated classes and inputs. Here is an example of the structure: <div class="inputHolder"> <input type="button" class="inputclss" value="1"> </ ...

javascriptjquery

I keep encountering a parser error when making an AJAX call to retrieve JSON data. It seems to be caused by

here is a snippet of code I am working on $.ajax({ type: 'GET', url: "<%=request.getContextPath()%>/manageUsers.do", cache: false, data:{ "resultType": "json", "submit": $.i18n.prop('esadmin.manage.users ...

javascriptajaxjson

Struggling to Add angular-websocket to a MeanJS v0.4.1 Application: Dealing with an 'Unknown Provider' Error

I'm encountering some challenges while using angular-websocket in a controller within my MeanJS project. The version of MeanJS I’m working with is v0.4.1. To begin, I installed it by running: bower install angular-websocket --save This creat ...

javascriptangularjsnode.jsmeanjs

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

htmlcss

Retrieving form data from within the resource error callback scope

For my client-side validation on submit, I am calling a resource if the form is valid. On success, everything works fine. However, when encountering an error handler, I also perform server-side validation on my data transfer object bean which contains Hibe ...

javascriptjqueryjsonangularjs

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

cssangularangular-material

Utilizing Hyperlinks in jQuery DataTables Cell with Data Pulled from Mysql Table

I have a question that builds upon the one before it: How to display a hyperlink in a cell with jQuery DataTables There is also a Fiddle link provided My current query revolves around implementing hyperlinks when fetching data from a MySQL database table ...

javascriptphpjqueryajaxdatatables

Need inspiration for testing web content with Protractor?

Exploring new possibilities for testing web content with Protractor. Any fresh ideas on what else can be tested? So far, I've checked links to ensure they redirect correctly. I've also verified text color and decoration changes when hovering ove ...

htmlcsstestingprotractorend-to-end

Create an HTML div element that spans the full width of the

I'm facing an issue on my HTML page where a div containing users from a chat system database is not displaying correctly. The ul li tag within the parent div is not taking up the full width as expected. Here's how it should look: http://prntscr.c ...

htmlcss

Incorporating post data into a Partial View

Main objective: My goal is to enable users to click on a specific day on the calendar plugin and have a popup Bootstrap modal display events scheduled for that day. Current Progress: I am currently utilizing a javascript plugin called fullCalendar. With ...

c#javascriptasp.netajax

Ways to retrieve information from a specific key

I'm currently facing a challenge accessing specific data objects that are referenced by keys. In this particular scenario, the "applicant" data is nested within an Event object. My goal is to extract this data and create a new object from it. While I ...

javascriptvue.js

What is the best way to incorporate the .top offset into a div's height calculation?

Looking to enhance the aesthetic of this blog by adjusting the height of the #content div to match that of the last article. This will allow the background image to repeat seamlessly along the vertical axis. I attempted the following code: $(document).re ...

javascriptjqueryhtmlcss

Transformed the Next.js Pages Router into an Application Router

Looking to make a change in my API written with Nextjs's Pages Router. Currently, it serves as a proxy for downloads and I am interested in converting it to the App Router method. Does anyone have any guidance on how to go about implementing this? imp ...

javascriptnext.jsnext.js13

Chrome causing the vanishing act of floated iframes

I encountered an unexpected issue on my website recently. For the past three years, everything was working smoothly until I updated Chrome to version 60. Now, whenever I try to load iframes from Archive.org, they momentarily appear and then vanish instantl ...

htmlcssgoogle-chromeiframe

Tips for positioning social media icons on the right side of the navigation bar

I need assistance aligning my social media icons with the navbar on the right side of the display. Can someone provide guidance? The first image shows the current layout, while the second image illustrates how I would like it to appear: http://imgur.com/a ...

jqueryhtmlcsstwitter-bootstrap

Unable to execute multiple instances of Selenium PhantomJS concurrently

I have encountered an issue while using Selenium's node.js API to run PhantomJS instances against a series of web pages. The code that I have written to perform actions on the pages is functioning correctly, but it appears that only one instance of Se ...

javascriptnode.jsseleniumselenium-webdriverphantomjs

Ways to convert asynchronous operations of Node.js into synchronous operations in Node.js

Using node js, I am making multiple AWS API calls within a for loop. var prodAdvOptions = { host : "webservices.amazon.in", region : "IN", version : "2013-08-01", path : "/onca/xml" }; prodAdv = aws.createProdAdvCli ...

javascriptnode.jsasynchronoussynchronousaws-lib