Dawn theme footer menu horizontal and drop down in desktop view

Store Design
, , , , , , , , , , , , ,
1

I’m using dawn theme latest version in that, I need to make footer section in desktop view as horizontal and also dropdown menu when multiple menu are there

website: mannavan.myshopify.com

password: offnorth

Thanks in advance

2

Hey @Sivadarshan ,

Yaa, sure! I’ve reviewed the theme, and here’s the solution to make your footer section horizontal on desktop view with dropdown menus for sections with multiple items:

  1. Making the Footer Horizontal (Desktop View)

I’ve used Flexbox to ensure that the footer sections align horizontally on desktop view, and here’s the custom CSS for that:

@media (min-width: 1024px) {
  .footer__content-top .footer__blocks-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .footer-block {
    flex: 1 1 20%; /* Adjust based on how many columns you want */
    margin-right: 20px;
    margin-bottom: 20px;
  }

  .footer-block__heading {
    text-align: left;
  }
}
  1. Creating Dropdown Menus for Sections with Multiple Items:

I added the necessary CSS to create dropdown menus for sections with multiple items. Here’s the CSS for the dropdown effect:

.footer-dropdown {
  display: none;
}

@media (min-width: 1024px) {
  .footer-block:hover .footer-dropdown {
    display: block;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
  }
  
  .footer-block {
    position: relative;
  }
}
  1. Ensuring Responsiveness for Mobile and Tablet Views:

The layout will remain stacked or vertical for smaller devices, ensuring that it’s fully responsive:

@media (max-width: 1024px) {
  .footer__content-top .footer__blocks-wrapper {
    display: block;
  }

  .footer-block {
    margin-bottom: 20px;
  }

  .footer-block .footer-dropdown {
    display: block;
  }
}

This will give your footer a clean, horizontal layout on desktop, along with dropdown menus for items with multiple links. Let me know if you need any further adjustments or have additional questions!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

@rajweb Thanks for the code, but where to place the code

1 Like
4

You’re welcome! Here’s where you should place the code in your Shopify store:

  1. CSS Code:

To add the CSS code, follow these steps:

  • Online Store > themes > Edit code

  • In the left sidebar, under the Assets folder, find and click on the theme.css or base.css file (it may also be named something similar depending on the version of the theme).

  • Paste the CSS code at the bottom of the file.

Once you’ve added both the CSS and HTML changes, you can check the layout and functionality of your footer by going to the theme preview in the Shopify admin, or simply visit the live store if the changes are saved. Make sure to test both desktop and mobile views to ensure everything is displaying as expected.

Let me know if you encounter any issues!

5

Hi @Sivadarshan

Please try to add this code to your theme.liquid file, before in Online Store > Themess > Edit code and check
6

@Dan-From-Ryviu Thank you it’s for working for mobile and mobile too only accordion should open at a time, if another tab opens it must close automatically, but I need it desktop view

7

@rajweb Thanks for the code, I added all the code in base.css as i’m using dawn theme , but also not working, is there any corrections to be done in my side.