Solved

How to shorten the gap between menu and submenu and remove the underline in the submenu? Dawn theme

kaylaemcfadden
New Member
5 0 0

Hello, I want to shorten the gap between my dropdown menu so that it's a bit closer to the main navigation. Also, I want to remove the underline from under the submenu when it's hovered. I was able to do it for the main menu but not yet for the submenu. Thanks! 

 

My website is lolaatelier.fr

 

Screenshot 2024-03-01 at 09.15.36.png

Accepted Solutions (2)

techlyser_web
Shopify Partner
1404 262 276

This is an accepted solution.

Hello @kaylaemcfadden 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
 .header__submenu.list-menu {
     padding: 0 !important;
 }
 .header__submenu .header__menu-item:hover {
    text-decoration-line: unset !important;
  }
</style>

techlyser_web_0-1709282039550.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

PageFly-Henry
Astronaut
955 271 214

This is an accepted solution.

Hi @kaylaemcfadden 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.header__submenu{

    padding-top: 0 !important;

}

.header__menu-item {padding-top: 10px !important;}

.header__menu-item {

    padding-bottom: 0 !important;

}

.header__menu-item:hover {

    text-decoration-line: unset !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 5 (5)

techlyser_web
Shopify Partner
1404 262 276

This is an accepted solution.

Hello @kaylaemcfadden 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
 .header__submenu.list-menu {
     padding: 0 !important;
 }
 .header__submenu .header__menu-item:hover {
    text-decoration-line: unset !important;
  }
</style>

techlyser_web_0-1709282039550.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
tysonw32
Visitor
2 0 0

Hey how do I add space in between two custom liquids?

 

techlyser_web
Shopify Partner
1404 262 276

I'm not understand what you want to say.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
tysonw32
Visitor
2 0 0

tysonw32_0-1709326361959.pngThese two are custom liquid texts both the top and bottom ones. How do I add some space between them?

 

PageFly-Henry
Astronaut
955 271 214

This is an accepted solution.

Hi @kaylaemcfadden 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


.header__submenu{

    padding-top: 0 !important;

}

.header__menu-item {padding-top: 10px !important;}

.header__menu-item {

    padding-bottom: 0 !important;

}

.header__menu-item:hover {

    text-decoration-line: unset !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.