What is the best way to create a responsive mobile menu?

I recently used W3Schools as a reference to create a sidenav overlay menu https://www.w3schools.com/howto/howto_js_sidenav.asp with an accordion feature https://www.w3schools.com/howto/howto_js_accordion.asp. Despite my efforts, I'm struggling to make it responsive.

I attempted using #menu to address the issue, but it resulted in the entire menu disappearing. I suspect that my links not being enclosed in ul or li elements might be causing this problem.

<header>
   <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="index.html">Home</a>
      <a class="accordion" href="#">Design &#9663;</a>
      <div class="panel">
         <a href="mobile.html">Mobile</a>
         <a href="#">Web</a>
      </div>
      <a href="photography.html">Photography</a>
      <a href="branding.html">Branding</a>
      <a href="about.html">About | Contact</a>
   </div>
   <span class="opening" onclick="openNav()"><i class="fas fa-stream"></i></span>
</header>

.sidenav {
    position: fixed;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 4rem;
    z-index: 1;
    transition: 0.5s;
    overflow-x: hidden;
    background-color: ghostwhite;
    float: left;
}

.sidenav a {
    display: block;
    padding: 10px 10px 10px 32px;
    transition: 0.3s;
    font-size: 1rem;
    font-family: mr-eaves-xl-modern,sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-align: left;
    color: #504E4E;
}

.sidenav a:hover {
    font-style: italic;
}

.opening {
    position: absolute;
    top: 1.5rem;
    left: 5%;
    font-size: 1.3rem;
    color: #504E4E;
    float: left;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 5%;
    margin-left: 20%;
    float: left;
}

.accordion {
    width: 100%;
    padding: 18px;
    border: none;
    outline: none;
    transition: 0.4s;
    font-size: 1rem;
    text-align: left;
    color: #504E4E;
}

.active .accordion:hover{
    font-style: italic;
}

.panel {
    max-height: 0;
    padding: 0 18px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: ghostwhite;
    font-size: 1rem;
    font-family: mr-eaves-xl-modern,sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: #504E4E;
}

My goal is to achieve a horizontal menu layout when viewed on desktop screens.

htmlcssresponsive

Answer №1

Utilizing the ul and li elements should not yield any significant impact.

Implement media queries to apply a fresh style that supersedes your current one when your screen reaches a specific size.

To target screens with a width of 1024 pixels or greater, utilize @media ( min-width: 1024px ). To address screens with a width of 1024 pixels or less, use @media ( max-width: 1024px ).

If your menu is not appearing, it may be due to setting the width to 0 in the .sidenav selector. Remove this line. For displaying the menu full width on desktop, consider adding the following code snippet to your CSS file:

@media ( min-width: 1000px ) {
    .sidenav {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-end;
    }
    .sidenav > a {
        width: auto;
    }
}

Note that this method may not optimize accordion display; a restructuring of your HTML layout might be necessary. Nonetheless, this should serve as a foundation for incorporating media queries and adapting styles to various screen sizes.

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

How to eliminate looping animations with jQuery

While looping through items, I am encountering an issue where an animation triggers when the loop returns to the first div. I simply need a way to switch between divs without any animations on a set interval. $(document).ready(function () { function s ...

javascriptjqueryhtmlcss

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

I am having trouble incorporating bootstrap-icons into my angular project. Despite running the npm i bootstrap-icons command, I am unable to successfully add icons using icon fonts on my webpage. As a temporary solution, I have added the bootstrap icon CD ...

htmlcssangularbootstrap-5bootstrap-icons

Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?

Just wondering, could there be something in my code that's preventing <div class="rating"> from moving closer to the center? And is there a way to make it move closer horizontally? (On a side note, CSS layout and positioning still puzz ...

htmlcssmedia-queries

What is the best way to create a button that can cycle through various divs?

Suppose I want to create a scroll button that can navigate through multiple div elements. Here is an example code snippet: <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div ...

javascriptjqueryhtmlcss

Is it possible to use jQuery to update CSS styles in an AJAX request

Is it possible to update the CSS of divs that are injected into files but do not exist in the main HTML file? In my main HTML file, I have: <div id="container"> <div id="page"> <!placeholder> </div></div> I am having tr ...

htmlcssajaxjquery

Exploring the magic of cubic-bezier transitions in combination with Bootstrap Tabs buttons

I'm experimenting with creating a tab button switching animation similar to a specific reference, but without using Bootstrap Tabs. var tabs = $('.tabs'); var selector = $('.tabs').find('a').length; //var selector = ...

htmlcssbootstrap-5

Is there a way to always keep an element positioned directly above a fluid image that is perfectly centered?

My current project involves creating an overlay to display a fluid image of any size. The challenge I'm facing is how to consistently position the close button 30px above the image and flush with its right edge. The catch is that the container doesn&a ...

javascriptjqueryhtmlcss

What is the best way to show a background image behind the heading text?

I have a strip of images that I want to use as a background for my heading. However, I am encountering an issue where the first and last images of the strip are not displaying properly. Additionally, the image border appears straight instead of following ...

htmlcssbackground-imagehtml-heading

Invoke the designated JavaScript function within a subordinate <frame>

Below is an example of the standard HTML structure for a parent page named "index.html": <html> <head> <title>test title</title> </head> <frameset cols="150,*"> <frame name="left" src="testleft.html"> ...

c#javascripthtmldom

Styling with CSS: Utilizing the Float Left Property to Anchor Elements

Currently, I have implemented an anchor element that utilizes a CSS class to replace the text with an image. Despite its unusual nature, the end result is mostly satisfactory. .toolLink a { overflow:hidden; } .toolEdit { float:left; ba ...

css

how can I apply a class name to an SVG element within styled components

I've been attempting to style an SVG icon component using styled-components, but I'm encountering some issues as the styles I apply to the close icon are not taking effect. import styled from 'styled-components' import Close from ' ...

cssreactjssvgstyled-components

Does renaming a sub-directory in the static directory of an IntelliJ Spring Boot project cause any changes?

I'm a newcomer to IntelliJ and I've been using it to develop a Spring Boot application. Right now, my project structure looks like this: https://i.sstatic.net/7A7jb.png My goal is to set up a "css" directory within the "static" directory under ...

javacssspringspring-bootintellij-idea

Changing an element's color dynamically does not affect the color of the bullet point

When using Chrome (Version 45.0.2454.101 m), I noticed that when I add a class to a list element to change its color, the bullet point color is only updated when the window is resized or repainted. $("#a").click(function() { $("#a").addClass(&apo ...

jquerycssgoogle-chrome

I seem to be encountering a z-index dilemma

Is there a way to make my slogan float above an image on a wide screen? I've tried adjusting the z-index without success. You can find the site here: Here is the CSS code: The #Slogan contains the words: Fitness Bike Guides - Top Models - Discount ...

css

having trouble capturing the web element containing _ngcontent-c6 using python and selenium

I am having trouble capturing the highlighted web element in the screenshot below: https://i.sstatic.net/7ihmD.png I have attempted various options using both absolute and relative paths: submit = driver.find_element_by_xpath("html/body/vra-root/vr ...

pythonhtmlcssseleniumwebdriver

Tips for sending several values using multiple select input

I am seeking advice on the best way to insert multiple values into a table using a multiple select input that includes more than one value. Would it be better to use a single value separated by "|", or to use data attributes like data-id, data-price, etc? ...

phphtml

Challenges with dropdown menus in the sub navigation area

I am currently working on a navigation system that includes three levels of sub-navigation elements. While the functionality is fine up to the third level, it only displays one subcategory instead of multiple categories as intended. I suspect there might ...

jqueryhtmlcssnavigation

To ascertain whether the mouse is still lingering over the menu

I have a condensed menu construction that unfortunately cannot be changed in HTML, only CSS and JS modifications are possible! $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouse ...

javascriptjqueryhtmlcss

Message displayed within Ng-repeat loop

Having trouble implementing a tooltip within an ng-repeat for each item in a td element. Whenever the mouse hovers over an item inside the td, I want a tooltip to display with more details. The code below shows my setup, using ng-if to prevent displaying e ...

javascriptjqueryhtmlangularjs

What is the best way to ensure that an input field and a button stretch across the entire row in a Bootstrap form?

I need assistance with aligning the Post button to the right and having the text field for tags occupy the entire left section of the row within a Bootstrap 3 form. The form markup is shown below: https://i.sstatic.net/401RU.png Below is the complete cod ...

htmlcsstwitter-bootstrap-3