Attempting to discover the secret to keeping a hamburger menu fixed in place once it has been expanded

Exploring this example

https:// codepen.io/ducktectiveQuack/pen/mPGMRZ

I had trouble understanding the code block, so I resorted to trickery (just remove the space between the '/' and the 'c' lol)

My goal is to have the hamburger menu trigger a drop-down that remains static. Instead of shifting right and left accordingly - as it does currently. I want it to stay in place even after being clicked.

Being new to HTML/CSS and JavaScript (with some guidance from my professor), I hope you'll bear with me on what may seem like a simple query.

I thought setting 'position: fixed' or 'position: absolute' would solve the issue, but alas, not quite haha.

Thank you for your help!

javascripthtmlcss

Answer №1

After the dropdown menu appears, it shifts to the right and then again after hovering over the social tab. My goal is for it to remain stationary throughout, even when dropped down.

To achieve this, try setting #menu position to absolute, .nav li:hover ul position to absolute, top to 200px, and left to 0px. Also, note that the html is missing a closing </header> tag.

 #menu {
    position:absolute;
 }

.nav li:hover ul {
    position:absolute;
    top:200px;
    left:0px;
  }


document.getElementsByTagName("h1")[0].style.fontSize = "80px";
body {
  background-color: #a3d5d3;
}

#menu {
  position:absolute;
}

.nav li:hover ul {
    position:absolute;
    top:200px;
    left:0px;
  }
<!doctype html>
<html lang="en">
<head>
  <title>Banana | Home</title>
</head>
<style>
  body {
    padding: 0;
    margin: 0;
    background-image: url("img/vicmensa.jpg");
    background-color: #515151;
  }
  header {
    margin: 40px 0px 0px 60px;
    position: fixed;
  }
  #container {
    margin: 150px 0px 0px 400px;
    text-align: left;
    position: fixed;
    color: white;
    font-size: 24pt;
    font-family: monospace;
  }
  .title-block {
    margin: 20px 0px 0px 30px;
    text-align: left;
    color: #00b4ff;
    font-family: monospace;
    font-size: 24pt;
  }
  .text-block {
    margin: 0px 0px 0px 30px;
    width: 400px;
    text-align: left;
    color: white;
    font-family: monospace;
    font-size: 16pt;
  }
  .nav {
    display: none;
    text-align: left;
    font-size: 14pt;
  }
  .nav a:hover {
    color: white;
    text-decoration: none;
  }
  .nav ul {
    display: none;
    background: none;
  }
  .nav li:hover ul {
    display: block;

  }
  
  a {
    text-decoration: none;
    color: #00b4ff;
  }
  li {
    list-style: none;
  }
  .burger-button {
    background: none;
    position: absolute;
    border: 0;
    color: white;
    outline: none;
    font-size: 20pt;
    font-family: monospace;
  }
  .x-button {
    background: none;
    position: absolute;
    border: 0;
    color: white;
    outline: none;
    font-size: 20pt;
    font-family: monospace;
  }
</style>

<body>
  <header>
    <button class="burger-button" onclick="
if (document.getElementById('menu').style.display=='block')
{
document.getElementById('menu').style.display = 'none'
}
else
{
document.getElementById('menu').style.display = 'block'
                    /*make the hamburger icon an X and get it to stop moving positions*/
                }
"><a href="#"><span style = "color: white;">&#9776;</span></a>
      </button>
      <!-- nav -->
      <ul class="nav" id="menu">
        <li> <a href="/"> Home </a> 
        </li>
        <li> <a href="about.html"> About </a> 
        </li>
        <li> <a href="contact.html"> Contact </a> 
        </li>
        <li> <a href="music.html"> Music </a> 
        </li>
        <li> <a href="pictures.html"> Pictures </a> 
        </li>
        <li> <a href="projects.html"> Projects </a>
        </li>
        <li> <a href="resume.html"> Resume </a> 
        </li>
        <li> <a href="#"> Social + </a> 
          <ul>
            <li> <a href="#" target="_blank"> Facebook </a> 
            </li>
            <li> <a href="#" target="_blank"> Twitter </a> 
            </li>
            <li> <a href="#" target="_blank"> Instagram </a> 
            </li>
            <li> <a href="#" target="_blank"> LinkedIn </a> 
            </li>
          </ul>
        </li>
      </ul>
      <!-- end nav -->
  </header>

  <div id="container">
    <div class="title-block">
      first middle last
      <hr style="width: 100%; height: 2px; background-color: white; border-radius: 2px; margin: 0px 0px 5px 0px;">
    </div>
    <div class="text-block">
      <span style="color: #00b4ff"><em> noun </em></span> 
      <br>city, state
      <br>junior at <a href="http://www.usc.edu">university</a> 
      <br>
    </div>
  </div>
</body>

</html>

Visit the codepen link for more information: https://codepen.io/anon/pen/GZXvOR

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

Issue with Next.js Button not displaying expected result

I am in the process of developing a todo list application using next.js. The issue I am facing is that when I input data into the field, it correctly displays in the console. However, upon clicking the button, instead of the input displaying like a norma ...

javascriptnext.js

Creating a Vue application without the use of vue-cli and instead running it on an express

Vue has an interesting feature where vue-cli is not necessary for running it without a server. Initially, I thought otherwise. The Vue installation page at https://v2.vuejs.org/v2/guide/installation.html mentions using a script under CDN. <script src=&q ...

javascriptnode.jsexpressvue.jsvuejs2

What is the best way to retrieve the current page name in DNN and store it in a JavaScript

Having trouble capturing the current DNN page name and assigning it to a variable in javascript. Despite searching online, I haven't been able to find the right code for it. <script type="text/javascript"> var tabName = <% =TabName %>; &l ...

javascriptdotnetnuke

How can I update the state with the value of a grouped TextField in React?

Currently working on a website using React, I have created a component with grouped Textfields. However, I am facing difficulty in setting the value of these Textfields to the state object. The required format for the state should be: state:{products:[{},{ ...

javascriptreactjsmaterial-ui

Can you provide a require statement that is the equivalent of this import statement?

Looking to transition a few files from utilizing import to using require in order to eliminate the need for Babel. One of the import statements appears like this: import React, { Component } from 'react'; How can I change it to a require state ...

javascriptnode.jsimportecmascript-6require

After a short delay, make sure to open a new tab when clicking to bypass any popup blockers without relying on Ajax technology

Before you downvote, please consider my rationale. I am in the process of developing a web-based educational project that includes an art section. When a user clicks on a button, an element containing a picture of an art piece appears. I then want to open ...

javascriptjquery

Clicking on the Submit button of the post form simply refreshes the page

Every time I try to submit values from an HTML form, the page reloads without any changes. I've double-checked the routes and controller, but everything seems correct. Solution <div class="panel-body"> @if (session('status')) ...

phphtmllaravel

Vue error: Uncaught promise rejection - RangeError: The computed value update has exceeded the maximum call stack size

My computed code snippet: computed: { display: { get() { return this.display }, set(newValue) { this.display = newValue } } }, Attempting to update the computed value from a function in ...

javascriptvue.js

What is the best way to center an image in a bootstrap navbar?

After implementing a Bootstrap navbar code with a search bar and logo, I encountered an issue. Despite extending the search bar, my logo image remains uncentered. I attempted to use a class for the image like this: <img class"justify-content-cent ...

htmlimagebootstrap-5

Dealing with throwing Exceptions in jest: A guide for developers

I have developed a method that throws an exception when the provided password does not match a regex pattern. I attempted to handle this in Jest. it('Should prevent insertion of a new user if the password doesn't match the regex', async () ...

javascripttypescriptexceptionjestjsnestjs

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

As someone who is new to Angular, I am facing a challenge while working on my portfolio project. The issue arises when trying to receive a list of nested objects structured like this: "$id": "1", "data": { &quo ...

htmlarraysjsonangulartypescript

Encountering the error message "value is not defined" when using a React range slider

I recently tried setting up the nodejs react range slider component by following the instructions provided on https://www.npmjs.com/package/react-rangeslider. Despite installing all the necessary dependencies, I keep encountering an error message stating ...

javascripthtmlreactjsnpm

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml

What is the best way to display tip boxes for content that is added dynamically?

One of the challenges with my web page is that dynamically added content does not display tipboxes, unlike items present since the page load. I utilize the tipbox tool available at http://code.google.com/p/jquery-tipbox/downloads/list. To illustrate the i ...

javascriptjqueryhtml

In JavaScript, when you update the property of a nested object within an array, the changes will also be applied to the same property for

Encountered an interesting issue in my code where updating a single property of a nested object within an array of objects results in all similar objects having the same property updated. Snippet of the Code: let financials = { qr: { controlData: [ ...

javascriptjqueryjson

To view the contents of the dropdown list on an iPhone, simply tap the arrow key next to the mobile dropdown list and the contents will be

I am attempting to trigger the dropdown list contents to open/show by tapping on the arrow keys near AutoFill on the iPhone mobile keyboard. This action should mimic clicking on the dropdown itself. Currently, I am working on implementing this feature for ...

javascriptjqueryhtmliosiphone

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

My input HTML field is disabled, but I've noticed that in some browsers (such as Chrome, Edge, Internet Explorer, and Opera), it's still possible to select and copy the text. However, in Firefox, this functionality does not work. To test this yo ...

javascripthtmlcssangular

Every time I attempt to visit my website on a mobile device, it seems to appear larger than normal, as

After developing a responsive website and adding media queries to make it mobile-friendly, I encountered an issue. Despite my efforts, the website's width is still larger than the mobile viewport, requiring users to zoom out to view it properly as sho ...

htmlcssresponsive-design

What are the advantages of importing CSS files from JS source code with webpack, rather than building CSS in isolation as traditionally done?

If you're looking for information on how to load CSS with webpack, check out the documentation here: https://webpack.js.org/guides/asset-management/#loading-css1 The webpack documentation suggests importing CSS files from JavaScript code and using ex ...

csswebpack

After submitting the form, the delete button in Bootstrap 4 has transformed into an unusual shape

I have a panel on my page, inside the panel header there is a red delete button. The panel content includes a form with several buttons (the red delete button is not inside the form, but linked to it with the form="abc" attribute). In the image below, whe ...

htmlbuttonbootstrap-4