How to adjust padding and length of dividing line in Mega Menu?

How to adjust padding and length of dividing line in Mega Menu?

AceStore
Excursionist
20 0 7

Website link: hillenic.com

Hello, I added custom code for dividing line between Mega Main Menu items using code:

 

li.navigation__item {
    border-right: 0.1px solid #FFFFFF;
    padding-left: 25px;
}
li.navigation__item.navigation__item--with-children.navigation__item--with-small-menu {
    border-right: none;

 


It makes my Mega menu looks like that:
Screenshot 2023-09-14 at 10.23.55 PM.png

Questions:

1 ) Does somebody know the code to control the padding of the Dividing Line ?
2 ) Does somebody know the code to make dividing line longer so it touches the bottom and the top of the header ?

Replies 2 (2)

PageFly-Henry
Shopify Partner
1184 335 295

Hi @AceStore 

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 styles.css

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

 

.navigation__tier-1-container {

    top: 25% !important;

}

.navigation--left .navigation__tier-1-container .navigation__tier-1 > .navigation__item > .navigation__link {

    padding-top: 45px !important;

    padding-bottom: 30px !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.

AceStore
Excursionist
20 0 7

Unfortunately it doesn't work. Do I have to delete my previous code and add yours or I just have to add it below the one I have ?