Refresh Theme - Overlay menu with js only work on mobile OR desktop, never on both

skurt23 · ‎10-08-2024

Hi

I am trying to get an overlay menu effect on my site using JS, but it only works on either the mobile or desktop. Never on both simultanously. I am editing the code in the custom liquid spaces.

I have tried to strip down the code to ONLY the code for the menu, to make it simple but no success. I have tried to give the menu different names for mobile and desktop, to minimize the risk for conflict but that doesnt seem to matter at all, still only works on one or the other, not both.

Right now it works on the desktop view, while the menu-button on the mobile-view render nothing.

My site

Can it be a bug in the theme? In that case, how do i contact the developers? If not, what am i doing wrong?

I use the theme Refresh 15.1.0

rajweb · ‎10-08-2024

Hi @skurt23 ,

here's how you can handle your overlay menu to ensure it works both on desktop and mobile views.

Ensure Correct CSS with Media Queries:

/* Desktop-specific styles */
@media (min-width: 750px) {
  .overlay-menu {
    display: none; /* Start with hidden */
  }
  .menu-open {
    display: block; /* Show the overlay when menu is open */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
  }
}

/* Mobile-specific styles */
@media (max-width: 749px) {
  .overlay-menu {
    display: none; /* Start hidden on mobile */
  }
  .menu-open {
    display: block; /* Show menu when open on mobile */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
  }
}

JavaScript to Handle Both Views:

document.addEventListener("DOMContentLoaded", function () {
  const menuButtonDesktop = document.querySelector('.menu-button-desktop');
  const menuButtonMobile = document.querySelector('.menu-button-mobile');
  const overlayMenu = document.querySelector('.overlay-menu');

  function toggleMenu() {
    overlayMenu.classList.toggle('menu-open');
  }

  // Desktop menu button listener
  if (menuButtonDesktop) {
    menuButtonDesktop.addEventListener('click', function () {
      toggleMenu();
    });
  }

  // Mobile menu button listener
  if (menuButtonMobile) {
    menuButtonMobile.addEventListener('click', function () {
      toggleMenu();
    });
  }
});

Verify with Refresh Theme Customizations:

document.addEventListener("DOMContentLoaded", function () {
  const menuButton = document.querySelector('.menu-button'); // Single button for both
  const overlayMenu = document.querySelector('.overlay-menu');

  function toggleMenu() {
    overlayMenu.classList.toggle('menu-open');
  }

  // Event listener for both mobile and desktop menus
  if (menuButton) {
    menuButton.addEventListener('click', function () {
      toggleMenu();
    });
  }
});

Let me know if this resolves the issue

Rajat | Shopify Expert Developer
Need a reliable Shopify developer for your next project?
Our App: Productify Groups App
Email: rajat.shopify@gmail.com
Portfolio: https://rajatweb.dev

skurt23 · ‎10-08-2024

Hi and thanks for your quick response!

The CSS part i get, but i am pretty new on javascript.

JavaScript to Handle Both Views:

where do i put this code?

Verify with Refresh Theme Customizations:

what do you mean by this?

Im sorry if my questions seem stupid, again i am very new on javascript 😃

softlab · ‎10-08-2024

Hi @skurt23,

I hope you’re doing well!

I have checked the theme console, and noticed that the JavaScript display the menu for both desktop and mobile is breaking due to the jQuery script not being loaded. You can see the console error in the screenshot below. integrated to

skurt23 · ‎10-08-2024

Hi and thanks for your answer!

Okay so if i understand it right, its some kind of conflict with the javascript? That is the feeling ive been having but i dont really know if it is a development-bug or just me who isnt applying the scripts correctly?

Sorry, very new on javascripts 😃

skurt23 · ‎10-08-2024

Hi again

This is my custom CSS for the desktop view:

@media screen and (max-width: 751px) {
   {
    display: none !important;
  }
}

And the rest of the code added in the custom liquid for the desktop view:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>




/* Hide the search bar by default */
.search-bar-desk {
    display: none;
}

/* Style the search icon */
.search-icon-desk {
    cursor: pointer;
	width:50px;
	height:50px;
	float: right;
        margin-top:-122px;
        margin-right:58px;
        color:#003D57;
	stroke: #003D57;
    stroke-width: 1.5;
background:white;
}


.search-container-desk {
background-color:white;
}






.mobile-container-desk {
width: 1200px;
margin: auto;
height: 158px;
background:white;
position:relative;
padding:10px;
}

.topnav-desk {
overflow: hidden;
position: relative;
text-align:center;
}




.overlay-desk {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content-desk {
  text-align: center;
  margin-top:40px;
}

.overlay-desk h1 {
  text-decoration: none;
  font-size: 36px;
  color: #fff;
margin:0;
}

.overlay-desk a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;a
}

.overlay-desk a:hover, .overlay-desk a:focus {
  color: #818181;
}

.overlay-desk .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay-desk a {font-size: 20px}
  .overlay-desk .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.navbtn-desk {
width:50px;
height:50px;
background:#white;
display: block;
position: absolute;
color:#003D57;
left: 18px;
top: 32px;
}

.navimg-desk a{
margin-right:820px;
}


.nav {
text-align:center;
background-color:#195068ff;
margin:0;
}

.nav h4 {
padding:0;
margin:0;
} 
 
.nav ul{
display:inline-block;
list-style:none; 
padding:10px;
background:195068ff;
margin:0;
}

.nav a {
  color: white;
  text-decoration: none;
  font-size: 24px;
  text-align: center;
  padding:10px;
  margin:0;
}

  .nav li{
    display:inline;
    margin:0;
  }
  
.nav a:hover {
  background-color: #1d5e7aff;
  padding:10px;
  margin:0;
}

.nav a.active {
  background-color: 1d5e7aff;
  padding:10px;
  margin:0;
}
 }


@font-face {
  font-family: "Archivo Narrow";
  src: url({{ "Archivo Narrow" | asset_url }}) format("woff2");
}




</style>
</head>
<body>


<!-- Simulate a smartphone / tablet -->
<div class="mobile-container-desk">

<!-- Top Navigation Menu -->
<div class="topnav-desk">

<div class="navimg-desk">
<a href="https://1bfba6-ca.myshopify.com/">
<img src="https://cdn.shopify.com/s/files/1/0895/1087/1379/files/KI3.png" style="width:15%;"></a>
</div>

<div id="myLinks" class="overlay">
  <a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content-desk">
    <a href="https://1bfba6-ca.myshopify.com/pages/om-kriminfo"><h1>OM KRIMINFO</h1></a>
    <a href="https://1bfba6-ca.myshopify.com/collections/frontpage"><h1>JURIDISK HJÄLP</h1></a>
    <a href="https://1bfba6-ca.myshopify.com/pages/vanliga-fragor"><h1>VANLIGA FRÅGOR</h1></a>
    <a href="https://1bfba6-ca.myshopify.com/pages/kontakt"><h1>KONTAKT</h1></a>
  </div>
</div>

<div class="navbtn-desk">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
</div>

<div class="row">

<div class="headerimg">
<a href="https://1bfba6-ca.myshopify.com/pages/intagen" id="logo">
<img src="https://cdn.shopify.com/s/files/1/0895/1087/1379/files/intagen.png" style="width:75%">
<h4 class="title">INTAGEN</h4>
</a></div>

  
<div class="headerimg">
<a href="https://1bfba6-ca.myshopify.com/pages/anhorig" id="logo">
<img src="https://cdn.shopify.com/s/files/1/0895/1087/1379/files/anhorig.png" style="width:75%">
<h4 class="title">ANHÖRIG</h4>
</a></div>

<div class="headerimg"> 
<a href="https://1bfba6-ca.myshopify.com/pages/advokat" id="logo">
<img src="https://cdn.shopify.com/s/files/1/0895/1087/1379/files/advokat.png" style="width:75%">
<h4 class="title">ADVOKAT</h4>
</a></div>

</div>


<div class="search-container-desk">
    <div class="search-icon-desk">
<script>
function openNav() {
  document.getElementById("myLinks").style.width = "100%";
}

function closeNav() {
  document.getElementById("myLinks").style.width = "0%";
}
</script>

{% render 'header-search', input_id: 'Search-In-Modal' %}
<script>

$(document).ready(function() {
    // Toggle search bar visibility when search icon is clicked
    $('.search-icon').click(function() {
        $('.search-bar').slideToggle(); // You can use any animation effect you prefer
    });
});


</script>
</div>
</div>


</div>
</div>   


<div class="nav">
<ul class="nav"><h4>
  <li><a href="https://1bfba6-ca.myshopify.com/pages/om-kriminfo">OM KRIMINFO</a> </li>
  <li> <a href="https://1bfba6-ca.myshopify.com/collections/frontpage">JURIDISK HJÄLP</a> </li>
 <li>  <a href="https://1bfba6-ca.myshopify.com/pages/vanliga-fragor">VANLIGA FRÅGOR</a> </li>
 <li>  <a href="https://1bfba6-ca.myshopify.com/pages/kontakt">KONTAKT</a></li>
</h4></ul>
</div>




</body>
</html>

This is my custom css for the mobile view:

@media screen and (min-width: 750px) {
   {
    display: none !important;
  }
}

And the rest of the code added in the custom liquid for the mobile view:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* Hide the search bar by default */
.search-bar {
    display: none;
}

/* Style the search icon */
.search-icon {
    cursor: pointer;
	width:50px;
	height:50px;
	float: right;
        margin-top:-74px;
        margin-right:18px;
        color:#003D57;
	stroke: #003D57;
    stroke-width: 1.5;
background:#EFF0F5;
}


.search-container {
background-color:white;
}

.search-icon img {
    width: 20px; /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
}




.mobile-container {
max-width: 480px;
margin: auto;
height: 100%;
color: white;
border-radius: 10px;
}

.topnav {
overflow: hidden;
position: relative;
text-align:center;
}




.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #003D57;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay h1 {
  text-decoration: none;
  font-size: 36px;
  color: #fff;
margin:0;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;a
}

.overlay a:hover, .overlay a:focus {
  color: #818181;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.navbtn {
display: block;
position: absolute;
color:#003D57;
left: 18px;
top: 17px;
}

.navimg {
text-align:center;
padding:10px;
}



</style>
</head>
<body>


<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<div class="topnav">

<div class="navimg">
<a href="https://1bfba6-ca.myshopify.com/">
<img src="https://cdn.shopify.com/s/files/1/0895/1087/1379/files/KRIMINFOLONG.png" style="width:50%;"></a>
</div>

<div id="myLinks" class="overlay">
  <a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="https://1bfba6-ca.myshopify.com/pages/om-kriminfo"><h1>OM KRIMINFO</h1></a>
    <a href="https://1bfba6-ca.myshopify.com/collections/frontpage"><h1>JURIDISK HJÄLP</h1></a>
    <a href="https://1bfba6-ca.myshopify.com/pages/vanliga-fragor"><h1>VANLIGA FRÅGOR</h1></a>
    <a href="https://1bfba6-ca.myshopify.com/pages/kontakt"><h1>KONTAKT</h1></a>
  </div>
</div>

<div class="navbtn">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
</div>

<div class="search-container">
    <div class="search-icon">
<script>
function openNav() {
  document.getElementById("myLinks").style.width = "100%";
}

function closeNav() {
  document.getElementById("myLinks").style.width = "0%";
}
</script>

{% render 'header-search', input_id: 'Search-In-Modal' %}
<script>

$(document).ready(function() {
    // Toggle search bar visibility when search icon is clicked
    $('.search-icon').click(function() {
        $('.search-bar').slideToggle(); // You can use any animation effect you prefer
    });
});


</script>
</div>
</div>


</div>
</div>   
</body>
</html>

I also added a screenshot of the console after ive clicked on the overlay-menu-button:

Refresh Theme - Overlay menu with js only work on mobile OR desktop, never on both

Refresh Theme - Overlay menu with js only work on mobile OR desktop, never on both

Community Blog Articles