When selecting an option in the burger menu, the dropdown does not react properly

I am facing an issue with the burger menu where one of the options should trigger a dropdown, but the content is not adjusting properly.

The dropdown menu should push the other content downward, but currently, it overlaps.

I have included the code for the menu bar/burger menu below. I hope you can assist me, thank you.

https://codepen.io/SofieH/pen/ZvveNK

header {
  background: #e7e7e8;
  color: #EBEBD3;
  padding: 0.5em 0;
  position: relative;
}

header::after {
  content: '';
  clear: both;
  display: block;
}

.logo {
  float: right;
  font-size: 1rem;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.logo span {
  font-weight: 400;
}
  
<!-- More CSS code here -->

</header>

htmlcssdrop-down-menumedia-queries

Answer №1

Consider removing the position absolute property from .dropdown-treatment.

Try adding only the li tag as a direct child of ul.

For more information on positioning, visit here.

Here is a sample:

$('.menu-toggle').click(function() {

  $('.site-nav').toggleClass('site-nav--open', 500);
  $(this).toggleClass('open');

}); 
body {
  margin:0;
  padding: 0;
  width: 100%;
}

header {
  background: #e7e7e8;
  color: #EBEBD3;
  padding: 0.5em 0;
  position: relative;
}

header::after {
  content: '';
  clear: both;
  display: block;
}
......(Remaining code and styling elements)
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Godfornuft.dk</title>
  <link rel="stylesheet" href="css/skeleton_mobile.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>

  <link rel="stylesheet" href="css/costume.css">


  <!--https://codepen.io/anon/pen/YYxEej?editors=1010-->
</head>
<body>
  <header class="">
    <div class="container">

      <h1 class="logo">Godfornuft</h1>
      <nav class="site-nav">
        <ul>
          <li><a href="#">Forside</a></li>
          
          <li class="dropdown"><a href="zoneterapi.html">Behandlinger</a> 
                <ul class="dropdown-treatment drophover">
                  <li><a href="zoneterapi.html">Zoneterapi</a></li>
                  <li><a href="#">Tankefeltterapi</a></li>
                  <li><a href="#">Babyzoneterapi</a></li>
                </ul>
             
          </li> 
           
          <li><a href="#">Priser</a></li>
          <li><a href="#">Om Godfornuft</a></li>
          <li><a href="#">Kontakt</a></li>
    
        </ul>
      </nav>
      <div class="menu-toggle">
        <div class="hamburger"></div>
      </div>

      <div class="col XS-12 logotop">
        <img src="http://via.placeholder.com/200x30" alt="">
      </div>

      </header>

 
 

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
    <script  src="js/navbar.js"></script>
  </body>
  </html>

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

Creating an interactive form with file uploads using JQuery Mobile

I'm currently working on a JQuery Mobile page that is designed to enable video uploads to the Google App Engine Blobstore, complete with title, description, and more. Below is the HTML code for the form: <form class="form-horizontal" action="{{ u ...

htmlgoogle-app-enginegoogle-cloud-datastoreblobstorejquery-mobile

After resolving a quirky syntax error in my ejs code, I can't help but ponder what caused the issue in the first place

For my personal web development project, I've been working on a blog webpage to enhance my skills. However, I encountered an unusual syntax error while modifying the code to display different navigation bars for logged in and logged out users. Here&ap ...

htmlnode.jssyntax-errorejs

Tips on how to lock the ag-grid to the highlighted row's position and force it to scroll

We have integrated ag-grid into our system, and I am facing an issue with displaying the scrollbar in a child window based on the selected row position in ag-grid. Please refer to the Plunkr link below and click on source_id which will lead you to an edit ...

javascriptjquerycssangularjsag-grid

Is creating an expanding tab in CSS a difficult task?

I am in the process of developing a college website and I am curious about the difficulty level involved in creating an expanding tab on the side of the webpage. The idea is that when users hover over the tab with their mouse, it would expand to reveal add ...

htmlcsstabs

Place the cursor at the conclusion of the text box

I am working on creating a user input form for chat messaging and I need some help. Here is the HTML-code snippet that I am currently using: HTML-code Currently, when the user presses ENTER, I retrieve the text from the textbox and save it. If the user ...

angularhtmltypescripttextboxchat

"Executing ng-click directive on a second click changes the route in AngularJS

Why does my ng-click only redirect to a new location on the second click? It should redirect to $location.path('/login.signin');, but it only works if I click the button again. It's strange. Where could this issue be originating from? Belo ...

javascripthtmlangularjsfirebaseangularjs-ng-click

Setting the background color in the navbar of a Laravel application

I'm having trouble changing the color of my navbar to blue in certain parts. I've tried using background: lightblue;, but for some reason, two sections remain white. How can I make them completely blue? (see screenshot below) Any help would be ap ...

csslaravelcolorsbackground-color

Is there a way to refresh my order hook in React JS?

I've been attempting to modify the values within my order hook, but for some reason, they aren't updating. I'm relatively new to React and can't figure out what mistake I might be making. Any insights? Take a look at my code snippet: ...

javascripthtmlreactjsreact-hooks

How to vertically align an image within a div that has a variable height

Is there a way to center an image vertically within a div that is 1/5 of the screen's height? I have managed to horizontally center the image, but vertical alignment seems tricky. Here's the code I've tried so far: http://jsfiddle.net/ws911 ...

htmlcssvertical-alignmentviewport-units

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

I have a script that needs to pass an array called "playernames" to a Java function on another .jsp. I'm looking for guidance on how to send this array to the other page and then retrieve it for my Java function. <script> function getPlayerName ...

javascriptjavahtmljsp

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

javascripthtmlcss

Creating a visually appealing webpage by utilizing Bootstrap and HTML for the layout

I am in the process of learning html and Bootstrap for CSS. Below is the code I currently have: <div class="container"> <div class="row text-center mb-4 mt-2"> <div class="col-md-12"> <div cla ...

htmlcssbootstrap-4

Maintaining responsiveness, CSS grid will automatically adjust the height of each element to be equal

I am facing an issue with my grid layout. Each element in the grid has an image and other divs below it. The problem arises when the screen size changes, causing the elements to scale automatically due to responsive width. I want all the images to have the ...

htmlcsscss-gridresponsive

Structure of Divs with Bootstrap

Looking to create a layout with two divs side by side like the image below: Example However, when the screen width increases, the layout changes to this: Current Here is the code: Is there anyone skilled in this area who can guide me through it? Your a ...

htmlcssbootstrap-4

How can I anchor a div Banner saying "Get 50% off our products" to the Navbar directly above it?

Bootstrap Question: How can I attach the div Banner ("50% off of our products") to the Navbar directly above it? The structure looks like this: <Navbar> </Navbar> <div> <span>Discount: 50% off of our products </span </di ...

javascriptcssfrontendbootstrap-5react-fullstack

Saving the name and corresponding value of a selected option element into separate fields using Angular framework

I have implemented the following code to generate a select field. The ngModel is successfully updating the value, but I am also looking to capture the name of the selected option and store it in a different field. Is there a solution to achieve this? ( & ...

htmlangular

Tips for making nested sliding divs within a parent sliding div

Is it possible to slide a float type div inside another div like this example, but with a white box containing "apple" text sliding inside the black div it's in? I have attempted to recreate the effect using this example. Here is my current JavaScript ...

javascriptjquerycssdhtml

Transform pixel padding into percentage ratios

I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario. My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are curre ...

javascripthtmlcsspositionpadding

Identifying when a system window covers an iframe

After watching a fascinating YouTube video (https://www.youtube.com/watch?v=TzPq5_kCfow), I became intrigued by how certain features demonstrated in the video could be implemented using JavaScript. One specific question that arose for me was how one can d ...

javascripthtmliframeoptimizationrender

Location of Custom HTML Widget in Django-Dashing

I've encountered a dilemma while using the Django-Dashing framework, specifically regarding the placement of my HTML file for a custom widget. I have meticulously configured the code in my dashboard.html file to ensure proper loading. {% extends &apo ...

javascripthtmldjangodashingrivets.js