Achieving a stacked layout for a JavaScript menu that is responsive and positioned below an

Despite several attempts, I am struggling with a problem and now need some help. I have designed a menu system with a logo, but the issue is that the menu does not stack under the logo when @media reaches 823px. Can anyone suggest a solution to this problem?

You can find the code and CSS on this codepen https://codepen.io/Daxtux/pen/zJLgBX

<a href="#news"><img src="Logo.png" alt="Logo" style="float:left;width:110px;"></a>
<div class="Navigasjon" id="Toppnavigasjon">
<a href="#news">MENY 1</a>
<a href="#Howto">MENY 2 </a>
<a href="#about">MENY 3</a>
<a href="#about">MENY 4</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>

Any assistance would be greatly appreciated!

javascripthtmlcss

Answer №1

Are you looking to have the hamburger menu in the top right corner trigger a dropdown beneath the logo? Instead of hiding it behind a click, have you considered keeping it visible below the logo at all times?

If you decide to go with the dropdown approach, I recommend placing the logo and header within one container div and utilizing display: flex; or display: grid; to structure them the way you desire.

For instance, by setting the container's style to 

width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;
and giving each child element a min-width: 450px;, they will automatically move to the next line when the container width is less than 900px.

You can achieve a similar effect using display:grid; by adjusting the grid-template-columns: 1fr 1fr; to grid-template-columns: 1fr; at the smaller media query size.

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

Setting a CSS style for an ASP.NET button: What you need to know!

I am facing an issue with the styling of my asp:Button. I have applied CSS styles using the cssClass property, but they are not being applied correctly. Surprisingly, when I switch to using asp:LinkButton, the styles work perfectly fine. I prefer not to us ...

asp.netcssbuttonaspbutton

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

javascripthtmlreactjs

How can I display different divs based on a selected option?

I'm encountering difficulties while attempting to develop the code for this specific task. My goal is to display or hide divs based on the selection made in a select option, with a total of 4 options available. There are 2 select elements <select ...

javascriptjqueryhtmlcss

Creating personalized checkboxes

Trying to create custom checkboxes for different colors like red, blue, etc... https://i.sstatic.net/IKqJH.jpg Struggling to achieve the desired outcome Utilizing Bootstrap 5.3: Attempting to learn by dissecting a bootstrap template with the desired res ...

htmlcssbootstrap-5

Looking to adjust the HSL of individual colors on a JavaScript canvas, similar to editing in Photoshop?

I'm looking to manipulate the HSL of an image using Javascript. I don't want to apply changes to the entire image at once, but rather target specific color sets like blues and yellows, similar to how it's done in Photoshop. What type of da ...

javascriptimage-processingcanvas

Widget for navigating through Youtube videos

I am currently working on creating a widget that allows users to navigate a YouTube video using buttons. For instance, if the video is of a car race, there would be buttons labeled Lap 1, Lap 2, and so forth. My idea involves adding an extension to the vi ...

javascripthtmliframehyperlinkyoutube

Can the value of the currently selected option in a select box be obtained without needing to submit the form?

I'm currently working on a project and facing a roadblock with the following task: My goal is to extract the selected value from a dropdown menu and utilize it in my PHP script. The challenge here lies in capturing the chosen option without requirin ...

phpjavascriptjqueryajaxinput

How can I use HTML to replace specific text or blocks within the DraftJS Editor?

Incorporating Rich Text capabilities into my React-based web application using DraftJS Editor has been a focus of mine. One specific requirement I have is the ability for a user to trigger a drop-down menu by typing the "#" key next to the editor. From th ...

htmlreactjsreplacedraftjs

The absence of FontAwesome Icons is apparent

In the <head> section of my code, I include the following: <script href="https://kit.fontawesome.com/a076d05399.js"></script> Within some of my buttons, I have the following code: <div class="scroll-up-btn"> ...

htmlcssfont-awesome

Error: Please provide the required client_id when setting up Google Sign-In with Next-Auth

I have been trying to implement the Sign in with Google option in my Next.js application using next-auth. Below is a snippet of my [...nextauth].js file located in the api/auth folder: import NextAuth from "next-auth"; import Google ...

javascriptnext.jsgoogle-oauthnext-auth

What is the best way to trigger a jQuery function once a form has been successfully submitted?

Is there a way to execute a jQuery function AFTER a form has been submitted? I am familiar with calling a function ON submit, but I specifically need it to run after the form data has been posted and stored in the database using PHP. In my website projec ...

phphtmljqueryforms

Activate Bootstrap tooltip when input element is focused, and then when the next input element is selected

I'm trying to activate a tooltip on an input element within a table. My goal is to trigger the tooltip when either that specific input element or the adjacent input element in the table are focused. Below is the HTML structure: <td class="fea ...

javascriptjquerytwitter-bootstrap

Enhancing an existing Express project with socket.io (plus a side of React)

I have been working on a project with Express, which includes a messaging system. Initially, everything was functional with POST/GET methods for sending and receiving messages. However, I wanted to implement real-time messaging by integrating socket.io on ...

javascriptnode.jsreactjsexpresssocket.io

Obtain the visual representation of an object created in three.js during the rendering process

I have been pondering the way in which three.js handles rendering. It seems to me that it converts each element into an image before drawing it on a context. I'm curious if there are resources available where I can learn more about this process. Addit ...

javascriptthree.jsrendering

Is there a way to ensure that any updates made to the backend database are immediately visible in the browser?

Currently, I am facing an issue with my hardware scanner that is connected to a Windows computer. Whenever I scan an item using the hardware scanner, the Windows computer retrieves the price/information about that specific item. Then, I manually input this ...

javascriptdatabasewindowsbrowser

Error with NEXTJS: Prop type failed - The prop `href` in `<Link>` is expecting a `string` or `object`, but received `undefined`

After importing the Link from next/link and attempting to pass the dynamic endpoint in my components, I encountered an error message. https://i.stack.imgur.com/eqUK8.png https://i.stack.imgur.com/eIC4V.png I searched for a solution and came across a sug ...

javascriptreactjsnext.jshyperlink

Looking for a solution to the problem: Module 'import-local' not found

internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'import-local' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) Encoun ...

javascriptnpmbabeljs

Accessible Drag and Drop Pattern without Barriers

With the rise of ajaxish Web2.0, I question the feasibility of creating web pages that are 100% barrier-free. Are there established patterns to support common Web2.0 practices? I've been thinking about drag and drop functionality. Is there a universa ...

javascriptdesign-patternsdrag-and-drop

best practices for creating space between flexbox items

My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within ...

cssangularflexboxangular-materialangular-cdk

What is the best way to adjust the placement of this object so it is anchored to the left side?

https://i.sstatic.net/k8aF1.png I'm struggling to position one of my divs more to the left within a flex container. No matter what I try, changing the class of the div doesn't seem to have any effect. Here's the code snippet: import React f ...

cssreactjs