Problems encountered with the navigation on mobile devices

Seeking advice on debugging a non-functioning mobile side menu implementation. The main site, a WordPress site, works perfectly. However, the offsite white label version does not.

All HTML has been copied to the white label and necessary CSS and scripts have been added to the header and footer as well.

The appearance of the menu is correct, with proper styling. Even the hamburger menu icon changes on click, indicating that the scripts are loading correctly.

Main site: Failing page:

Not expecting a direct solution, but rather seeking guidance on how to debug and identify the specific issue causing the failure.

Aware of potential CORS issues with font icons, but currently focusing on resolving the menu problem.

Thank you for any assistance or advice provided. Kind regards.

Answer №1

You've updated the HTML structure and modified class names without adjusting the CSS and JavaScript/jQuery accordingly. It seems like you may not be targeting the correct element with your JavaScript/jQuery code to display the menu wrapper properly.

At , your mobile menu wrapper is named hamburger-menu-wrapper, while at , it's called wrapper-mobile-nav.

If you change hamburger-menu-wrapper to wrapper-mobile-nav at during inspection, the menu wrapper appears to function correctly.

I recommend checking the target elements in your JavaScript/jQuery code and making the necessary adjustments.

Answer №2

It seems like you may have overlooked transferring the Mobile Menu HTML code from to . I checked the screenshot provided by , however, I couldn't locate this specific HTML on your non-responsive page . This information should guide you in resolving the issue. Thank you!

https://i.sstatic.net/l0ep6.png

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

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...

What method is best for deleting an item from the database in HTML structure - POST, GET, or XHR action?

I have a webpage that displays content in a table format and allows users to delete a specific row by clicking on it. The structure of my rows is as follows: foreach ($rewards as $reward) { echo '<tr id="' . $reward[&apos ...

onsubmit function was never triggered

Seems like a silly mistake, but I'm encountering an issue with my HTML form. Here's a snippet of the code: <form onsubmit="updateProfile();"> <input type="submit" value="Update Account"> .. ... </form> However, w ...

Tips for updating multiple divs after submitting content with jQuery

My screen contains various widgets, each enclosed with different divs. Currently, I have a form that updates using AJAX when posted through jQuery. However, I am looking to refresh two additional divs located outside the form upon a single jQuery AJAX pos ...

Transferring a PHP array via AJAX in a simple manner

I'm facing an issue with displaying an array from a PHP file that I created. The specific data in question is data["vessel"]. I have the following jQuery: j$('select[name=vessel]').change(function(e) { var tour_ID = j$('select[ ...

Encountering an "Invalid CSS" error while trying to import an external font in SASS

Encountering an issue while attempting to load an external font in my SASS file. Below is the code snippet used to import the font-face from the all.sass file located in the same directory as leaguespartan-bold-webfont.woff and leaguespartan-bold-webfont.w ...

Navigating through a predetermined list of HTML pages with next and previous options

Hey there, I'm in a bit of a quandary at the moment. I've been searching on Google for quite some time now, but unfortunately, I can't seem to find what I'm looking for. Hopefully, you guys can lend me a hand. What I'm trying to d ...

Issues with Monospace Google Fonts on JSFiddle are preventing them from displaying correctly

It's strange how monospace fonts from Google Fonts don't display properly on JSFiddle. Only sans-serif and serif fonts seem to be functioning correctly. ...

Tips for retrieving multiple values or an array from an AJAX request?

Is there a correct way to pass multiple sets (strings) of data back after executing an ajax call in php? I understand that echo is typically used to send a single string of data back, but what if I need to send multiple strings? And how should I handle th ...

Using importXML with Internet Explorer 11

My project website includes a roster page that retrieves XML data. Previously, this functionality worked across all browsers but now it only works in Chrome. In IE11, it seems that the importXML function is not functioning correctly as the roster data is m ...

Utilize Bootstrap form control class to enhance the appearance of WooCommerce address fields

I'm struggling to incorporate the bootstrap class "form-control" into all of the woocommerce address fields in my account and during the checkout process. Essentially, I am attempting to apply the "form-control" class to both the billing and shipping ...

Automatically fill in a text field based on the selection from a drop

I need to automate the process of filling in text boxes on a page based on what the user selects from a dropdown menu. When the user changes their selection from the dropdown list, I want the corresponding text box to update with the value associated with ...

Tips for eliminating gaps between navigation items (HTML / CSS)

I'm struggling to eliminate the spacing between the li items in my navigation bar. Even after setting margin: 0px for both the item and anchor (link), the gap still persists. How can I get rid of these spaces? /* navigation styles */ nav { backgroun ...

Can you explain the significance of these specific HTML attributes within the button tag?

While browsing the web, I stumbled upon this HTML snippet: <button class="button--standard" mat-button mat-flat-button [disabled]=true >Disabled State</button> The combination of attributes like mat-button mat-flat-button [disabled]=true is u ...

What is the best way to ensure that the Bootstrap navbar remains collapsed at all times, regardless of the size of the

Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...

Conceal the <div> element if the <span>

Is there a way to hide the content within this div if the prop-value is empty? I specifically want to hide the text "First class" when Prop-value does not have any value. Any solutions? <div> <span class='prop-name'>F ...

Exploring the multi-page game interface in Asp.net - Seeking advice and direction

I am in the process of developing the game page for my quiz project using asp.net. I have already implemented all the game logic on the server-side. The game is a quiz that involves user response timing, scoring based on correct answers and timing. It is ...

What is the best way to incorporate multiple HTML buttons that utilize the same JavaScript function within looped results?

My HTML page contains the following codes: <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="metin" placeholder="Geben Sie Artikel Nr" style="width: 30%;"/><br/><br/> <input type="button" class="sin ...

Verify that the length of all input fields is exactly 7 characters

My task involves checking the length of multiple input fields that share a common class. The goal is to verify that all fields have a length of 7. After attempting a solution, I encountered an issue where even if the length of all fields is indeed 7, the ...

Adjustment of Image Placement

I'm describing my desired outcome briefly - I want the inputs in the code to appear in the top left corner of a large image. Despite trying multiple approaches, I have been unable to achieve this layout. When considering 2 columns, the inputs should b ...