CSS Toggle Navigation for Responsive Screen Re-Size in Both Horizontal and Vertical Orientations

I'm currently working on making a navigation menu responsive. Take a look at my progress so far here: https://jsfiddle.net/a16qwd20/4/

Unfortunately, I am facing an issue where the Javascript doesn't seem to be functioning properly in JS Fiddle, although it works correctly when implemented within script tags in my code.

As it stands now, the navigation links are displayed correctly above 580px, but the menu icon remains visible. Ideally, I would like the menu icon to only be visible when the display is below 580px, and above that, only show the links!

Below is the CSS for the Navigation before the media query takes effect:

#navigation {
 max-width: 100%;
 background-color: #333;
 padding: 0 1.5% 0 1.5%;
 margin: 0px;
}

#navigation ul {
 padding: 0px;
}

#navigation ul li {
 display: inline-block;
 padding: 10px 1.5% 10px 1.5% ;
}

#navigation ul li a {
 text-decoration: none;
 color: #ffffff;
 font-size: 1.2em;
}

#navigation ul li a:hover {
 color: #000000;
 text-decoration: none;
}

Any assistance on this matter would be greatly appreciated.

javascripthtmlcssresponsive-design

Answer №1

If you want to hide the button, make sure to include this in your main CSS code:

.menu_button {
visibility: hidden;
}

The button will only become visible when the media query conditions are met.

Check out the JSfiddle demo here

Answer №2

Here is a simple solution to achieve this. jsfiddle

@media only screen and (min-width : 580px) {
  .hide{
    display: none;
  }
}

    <a class="menu_button hide" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>

All you need to do is assign a class to your menu button that will hide it when the screen width exceeds 580px.

Answer №3

When utilizing onload or onDomReady, your code gets wrapped within a separate function that is triggered upon the load or ready event. Consequently, your function becomes inaccessible from outside of this function causing your javascript code to not execute properly in jsFiddle.

Give this a try

.menu_button
{
     display:none;
}

View demo here

Answer №4

Make sure to visit this link for further details.

In essence, the JavaScript code must be triggered once the element has finished loading.

let originalNavClasses;

function toggleNavigation() {
    let element = document.getElementById('navigation_list');
    let classes = element.className;
    if (originalNavClasses === undefined) {
        originalNavClasses = classes;
    }
    element.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}

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

Using jQuery to Populate (Inject Data into) a Nested SheepIt Form

I am working with a SheepIt form that deals with Vehicles, each of which can have any number of Stops (ranging from 0 to infinite). A vehicle is characterized by its type, notes, and an unspecified amount of stops. Each stop consists of a date, time, and l ...

javascriptjqueryjsonsheepit

Tap twice on Kendo Grid rows in the React Component

I am currently utilizing the React Grid component and I am in search of a solution to trigger a function when a row is double-clicked. While I have found a rowClick function that allows me to select a row or handle an onClick event: <Grid rowClick={e = ...

javascriptreactjskendo-uikendo-gridkendo-react-ui

Having trouble with your Bootstrap 4 Dropdown Menu?

I attempted to implement the dropdown menu example from Bootstrap 4, but unfortunately it does not seem to be working as expected. The dropdown menu does not appear when clicked. <li class="nav-item dropdown"> <a class="nav-link dropdown-to ...

javascriptcsshtmlbootstrap-4

Bidirectional data connection in a Meteor application

I've developed a form-based application and I would like to allow users to fill out the form partially and return to it at a later time if needed. I've utilized iron router to create a unique URL for each instance of the form, enabling users to a ...

javascriptnode.jsmongodbmeteordata-binding

Transform website code into email-friendly HTML code

Is there any software available that can convert web HTML and CSS files to email HTML with inline CSS? This would allow the email to be viewable on various email clients such as Outlook, Thunderbird, Gmail, Yahoo, Hotmail, etc. I want to write my code lik ...

htmlcssxhtmlnewsletter

Express JS backend causing CSS file to fail to load in React project

After doing some research on Stack Overflow, I came across a few solutions but none of them seemed to work for my specific situation. I am currently attempting to serve my React website from an Express backend server. Here is the layout of my folders: cli ...

javascriptcssnode.jsexpress

Excessive white space within a relative block div causing the content to appear smaller in comparison

Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...

htmlcss

Display a modal when closing a tab using Vue.js

I'm attempting to display a confirmation popup when the page reloads or the user navigates outside of my website in Vue.js. I have already implemented the beforeRouteLeave function in my component, but it only works when navigating to another page wit ...

javascriptvue.jsvue-router

Error in NodeJS when trying to run ESM: "ReferenceError: exports is not defined

Having a tough time with this task. I'm attempting to execute ESM scripts on Node 14 (AWS Lambda) I am working on running this piece of code to convert 3D objects to THREE JSON. This involves using the command node -r esm fbx2three.js model.fbx. I ...

javascriptnode.jstypescriptcommonjsclaudiajs

Unlocking the AngularJS variable within the template script

My controller code: $scope.totals = totals; In the template, I am able to successfully inject HTML using this code: {{totals}} However, my goal is to access the totals variable in a script within the template. Here's what I attempted: <script& ...

javascripthtmlangularjsangularjs-scope

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...

javascriptjquerycsshtml

Is there a way to deactivate a submit button that is delivered through an Ajax response within a div (popup)?

I have a button that triggers an AJAX request when clicked, opening a popup div with the Ajax response displayed inside. The popup is essentially a form with text boxes and a submit button. I've been attempting to add some JavaScript validations, but ...

javascriptphpajax

Extract the text content from an HTML file while ignoring the tags to get the substring

Hello, I am a newcomer to the world of Web Development. I have an HTML document that serves as my resume, formatted in HTML. For example: html <p>Mobile: 12345678891 E-mail: <a href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptjqueryhtmlangularjs

Property computation being initiated before property initialization

I am encountering an issue in my Vue application where I am trying to filter an array received from map getters based on a type prop within a computed property. Despite verifying that both the array elements and the prop are strings, the filtering process ...

javascriptvue.jsvuejs2vuexvuex-modules

Implementing JavaScript to display specific content when a list is devoid of any items

Currently, I am in the process of developing a basic contact list web application where the contacts are listed within li elements. My aim is to adjust the visibility of the text in the p#no-contacts element based on whether the containing ul has any child ...

javascript

Guide on uploading multipart career-form data with file paths and validation in CodeIgniter with the help of AJAX

I am facing an issue while attempting to insert job form data with file uploading and validation in PHP CodeIgniter via AJAX. The code I am using is provided below, but unfortunately, it's not functioning as expected. Can anyone help me figure out how ...

javascriptphpjqueryajaxcodeigniter

Getting information from a database using PHP and AngularJS through the $http.get method

Currently, I am utilizing an AngularJS script to retrieve data from an external PHP file that is encoded in JSON within an HTML page. The method $http.get(page2.php) has been employed to fetch a JSON-encoded array located in another file. However, the issu ...

javascriptphpjsonangularjs

What is the process for adjusting the checkbox border color in Material Design 15 and above?

Ever since the latest update to Angular Material 15, I've noticed some changes in how styling is applied to Angular Material components. Previously, in version 14, I used to be able to accomplish styling changes with code like this: ::ng-deep .mat-che ...

cssangular-material

I'm having trouble extracting data into my HTML file using the append function in Jquery. What could be causing this issue?

Hey there, I'm having some trouble extracting data from a URL to my HTML file using jQuery. Can anyone help out? I'm still new to this. Here's the code <html> <head> <title> My Program </title> <script src="ht ...

javascriptjqueryhtmljson

Creating a layout in jQuery Mobile with two HTML <input type="button"> elements positioned side by side and each taking up 50% of the screen

After trying numerous strategies, I am still struggling to place two buttons next to each other evenly: <input type="button" value="This week's Schedule" onclick= 'window.location.href = dic[current_sunday]' /> <input type="button ...

htmlcssjquery-mobile