The navigation on my mobile collapses whenever I use the Hello bar app

I am facing a problem with my Shopify theme. I recently installed an app called "Hello Bar" to show offers on all pages, but it seems to be incompatible with my theme. The developers of the app suggested adding the following code to my CSS file: 

@media screen and (min-width: 1025px){

     .page-wrapper{

        position: static;

   }

}
Although this fixed the issue on desktop, my mobile navigation menu is now collapsed and cannot be closed. To address this, I tried adding the code below: 
@media screen and (max-width: 1024px){
   .nav-mobile{
       display: none;
   }
However, clicking the menu button results in a blank menu. Can anyone provide some guidance or a workaround to resolve this issue?

javascriptjquerycssshopify

Answer №1

When you use the CSS property display: none;, it effectively makes the element invisible on the webpage which is why the menu appears empty.

Answer №2

I inserted this code snippet but unfortunately it failed to execute properly

<script type="text/javascript"> 
   $( document ).ready(function() { 
     $( "#icon-hamburger" ).click(function() {
       $("#cell-phone").show();
 });
 });

</script>

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

Sharing information using Fancybox 2

I have encountered an issue while using a form within a fancybox window to post data via Ajax to a php page. The form works perfectly fine when run outside of the Fancybox - insertion and response are both successful. However, when I run the same page thr ...

phpjqueryajaxfancybox-2

Detecting changes in a readonly input in Angular 4

Here is a code snippet where I have a readonly input field. I am attempting to change the value of this readonly input from a TypeScript file, however, I am encountering difficulty in detecting any changes from any function. See the example below: <inp ...

javascriptjqueryhtmlangulartypescript

Create a collection of functions within an array that each return promises

I have created 4 different functions that return promises. By running the "hello" function and passing each subsequent function into the next .then, you can generate a single long string output. var hello = function(str){ return Promise.resolve(str + "h ...

javascriptpromisebluebird

Prevent tracking of campaigns in Google Analytics by not following tagged links from banners to a website

My website is connected to Google Analytics. I have banners on my site that link to external pages with tracking tags added to the URL: However, I am not seeing campaign statistics in the Traffic Sources - Campaigns section of my Google Analytics account. ...

javascriptgoogle-analytics

What is the process for attaching a right ribbon label onto a card in Fomantic UI components?

I am completely new to Fomantic (and web development in general) and I'm attempting to create a website featuring a card with a ribbon label on the right side. I saw similar designs in the documentation where they used a segment instead. However, when ...

htmlcssfomantic-ui

Having trouble with installing npm package from gitlab registry

I recently uploaded my npm package to the GitLab package registry. While the upload seemed successful, I am facing an issue trying to install the package in another project. When I run npm install, I encounter the following error: PS E:\faq\medu ...

javascripttypescriptmedusa

Encountering sporadic EACCES issues while executing selenium tests in the AVA framework

Encountering errors on Windows 10 1809 while using Chrome for testing purposes. Error message 1 Frequency: Occurs approximately every 50th driver instantiation. [...]project\node_modules\selenium-webdriver\net\portprober.js:159 ...

javascriptseleniumselenium-webdriverava

What is the best way to search for a specific string within an Airtable record that may also have additional data included?

By utilizing the filterByFormula method in the airtable api, I am able to query and choose records that include a specific item (string). However, this query will only return the records that exclusively have that particular string. Referencing the airtab ...

javascriptnode.jsairtable

Finding the index and value of a specific HTML element with jQuery click event

I'm currently working on creating an Ajax function to delete items from a list using Jquery ajax. Here is the HTML structure: <ul> <li><a class="del"><span style="display:none;">1</span></a></li> <li& ...

javascriptjqueryajax

Exploring the World of Three.js Loaders

I downloaded the file package three.js-dev from threejs.org and I am trying to use it in my project like this: <script type="text/javascript" src="./build/three.js"></script> <script type="text/javascript" src="./src/loaders/JSONLoader.js" ...

javascriptwebthree.jsloader

Adding Hebrew characters from the URL query string to a field's content

I have encountered an issue while trying to extract a query string parameter value and inserting it into a field. The parsed output is not as expected. Here is the URL with the query string: activities.html?t=שלום Instead of displaying the value "ש ...

jquery

Craft a FormType showcase using the dynamic duo of Ajax and Jquery

If you'd like to check out the code snippet for reference, please visit: This view serves as the canvas where innovation blends with execution. As I embark on this journey towards dynamic form creation, every step counts. Thank you for being part of ...

javascriptjqueryajaxsymfony

Tips for creating a jasmine test scenario for a function executed within the ngOnInit lifecycle hook

I am finding it challenging to create a successful test case for the code snippet below. In my component.ts file id = 123456; data = []; constructor(private serv: ApiService){} ngOnInint(){ getData(id); } getData(id){ this.serv.getRequest(url+id) ...

javascriptangulartypescriptjasminekarma-jasmine

"Error TS2339: The property specified does not exist within type definition", located on the input field

When a user clicks a specific button, I need an input field to be focused with its text value selected entirely to allow users to replace the entire value while typing. This is the markup for the input field: <input type="text" id="descriptionField" c ...

javascriptangulartypescript

What is the best approach for incorporating remote validation in a KendoUI grid with AngularJS and Web API integration?

Currently, I am facing a challenge of inserting a product into a SQL table. My approach involves using Kendo UI grid and AngularJS technologies. I am seeking guidance on how to properly validate whether the product already exists in the database before exe ...

javascriptangularjskendo-grid

Issue: why is EPIPE being written on sendFile()?

Utilizing the html-pdf module for PDF generation, the code snippet below is what I am using: var ejs = require('ejs'); var fs = require('fs'); var pdf = require('html-pdf'); var build = function (template, data) { var ht ...

javascriptnode.jspdfsendfile

What is the best way to populate a div with text based on a selection from a drop-down menu

There are 3 select boxes for day, month, and year available. Take a look at the example provided here: http://jsfiddle.net/arieanneke/sf73o0w5/ var birthday = ""; $('#birthday').change(function() { var selectedDay = $(this). ...

jquerydrop-down-menuonchange

Tips on saving an array as a variable

Can anyone help me figure out how to store a PHP variable into a JavaScript variable? var myArray; function retrieveData(id) { $.post( "main/updater.php", { id:id } ).done(function( data ) { myArray = data; }); } I&ap ...

javascriptphparrays

Issue with duplicate listeners on page revisit in Jquery Mobile

My jQM app consists of numerous pages, and I am in the process of upgrading it to jQM 1.4. In order to comply with the new guidelines for 1.4, I am implementing the latest widgets/methods and eliminating all deprecated code. Let's consider a specific ...

jqueryjquery-mobile

Set the style to be displayed as a block element

I am working on a Rails application that contains some <li> elements with the CSS property display: none;. I want these elements to only appear on the page when they are being dragged. However, there are some elements that do not have the display: no ...

javascriptjqueryhtmlcssruby-on-rails