Re: Footer Menus "Mobile View"- Dawn Theme

Solved

How can I create dropdowns for footer menus in mobile view on Dawn theme?

mariamsatour
Excursionist
18 0 4

I created three different menus and included them in my footer "dawn theme",

they look good in desktop view, but when it comes to mobile view they are too long,

I need to create a dropdown for each menu.

 

website: www.mariamsatour.com

password: hellosatour

Screen Shot 2022-12-21 at 11.16.04 AM.png

Accepted Solution (1)
GemPages
Shopify Partner
5624 1261 1230

This is an accepted solution.

Hello @mariamsatour ,

 

I updated my code. You could please try it

 

Paste the below code before </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@media(max-width: 767px){
 footer .footer-block__details-content {
   display: none;
 }
 .footer__blocks-wrapper h2.footer-block__heading {
    position: relative;
 }
 .footer__blocks-wrapper h2.footer-block__heading:after {
    content: "\f078";
    font-family: FONTAWESOME;
    font-size: 12px;
    right: 0;
    position: absolute;
    transition: 0.5s;
 }
}
</style>

 

Paste the below code before </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
if ($(window).width() < 767){
 $('footer .footer-block__heading').each(function(){
    $(this).click(function(){
        $(this).siblings('.footer-block__details-content').slideToggle()
    })
 })
}
</script>

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 13 (13)

GemPages
Shopify Partner
5624 1261 1230

Hello @mariamsatour ,

 

It's GemPages support team and glad to support you today.

 

I would like to give you the recommendation to support you so kindly follow the steps below:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1671617342053.png


2. Open your theme.liquid theme file


3. Paste the below code before </head>

<style>
@media(max-width: 767px){
 footer .footer-block__details-content {
   display: none;
 }
}
</style>

 

4. Paste the below code before </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
if ($(window).width() < 767){
 $('footer .footer-block__heading').each(function(){
    $(this).click(function(){
        $(this).siblings('.footer-block__details-content').slideToggle()
    })
 })
}
</script>

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
mariamsatour
Excursionist
18 0 4

Thank you, I tried this it made the menus shorter but not clickable, I wanted them as three dropdown menus on top of each other “attached a picture of how they look like now”

08B01BDD-9205-4067-8BAE-8ABBA147EFFC.jpeg

GemPages
Shopify Partner
5624 1261 1230

This is an accepted solution.

Hello @mariamsatour ,

 

I updated my code. You could please try it

 

Paste the below code before </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@media(max-width: 767px){
 footer .footer-block__details-content {
   display: none;
 }
 .footer__blocks-wrapper h2.footer-block__heading {
    position: relative;
 }
 .footer__blocks-wrapper h2.footer-block__heading:after {
    content: "\f078";
    font-family: FONTAWESOME;
    font-size: 12px;
    right: 0;
    position: absolute;
    transition: 0.5s;
 }
}
</style>

 

Paste the below code before </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
if ($(window).width() < 767){
 $('footer .footer-block__heading').each(function(){
    $(this).click(function(){
        $(this).siblings('.footer-block__details-content').slideToggle()
    })
 })
}
</script>

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
mariamsatour
Excursionist
18 0 4

Worked perfectly! thank you!!

GemPages
Shopify Partner
5624 1261 1230

I am glad that my solution is helpful to you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
forevercreative
Excursionist
12 0 4

Hi @GemPages, I am having the same issue as @MArcela_chile 

The code works and functions great but my logo disappeared. Is there any solution for that? My website is www.foreverlycreative.com

Screenshot 2024-01-03 at 10.59.05 PM.png

MArcela_chile
Visitor
1 0 0

Hello @GemPages I also used your code in dawn theme.  Its works great but the image/logo of the company  when I see it on the mobile its gone.  I changed the size of the logo, and it don´t appear on mobile.  Do you have the same problem? You know how to solved it?

 

Captura de Pantalla 2023-01-17 a la(s) 10.07.29.png

  On mobile it look like this:

 

Captura de Pantalla 2023-01-17 a la(s) 10.11.10.png

 please can you help me. 

 

Regards from Chile. 

 

tada_store21
New Member
6 0 0

@GemPages  i tried the code ,but they are not clickable ,can you please help

tada_store21
New Member
6 0 0

even this code is not clickable, but the dropdown symbol is showing for me 

DER
Visitor
2 0 0

I tried the code, but they are not clickable. Could you please help ?
Many thanks

DER
Visitor
2 0 0

You must add defer to the Script  tag

jiyu
Visitor
1 0 0

Hi did it work for you after adding "defer" to the script tag?

JordanPlayFaire
Tourist
6 0 0

Hi @GemPages 

I'm using the Symmetry 2.0 Theme. I tried adding your code but it didn't work, no changes.

Can you suggest code for a Shopify 2.0 theme?

 

Thank you in advance for any help you can provide!