Horizontal Navigation Menu

Joybogen
Shopify Partner
5 0 0

Hello,

 

Can anyone help me with the Liquid code to create a centered, responsive, horizontal menu such as in the Story Theme:

Screenshot 2024-04-21 at 8.34.32 PM.jpeg

 

Thank you.

Replies 8 (8)

PageFly-Noah
Astronaut
1119 201 220

This is Noah from PageFly - Shopify Page Builder App

Hi @Joybogen.   Can you share me link url. And image menu navigation
I can help you, Thank you so much.

 

Best regards,

Noah | 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.

Joybogen
Shopify Partner
5 0 0

Hi Noah,

 

The page is:  https://sarah-dasco-photogragraphy.myshopify.com/collections/all

 

Password: studio

 

You will see I have a version of a horizontal menu but it is not great on mobile.

 

Thanks,

Joy

Joybogen
Shopify Partner
5 0 0

Stiletto

PageFly-Noah
Astronaut
1119 201 220

@Joybogen  thank you .Please add code here in file them.liquid and above tag </head>:

<style>
@media screen and (max-width:767px){
  .swiper-wrapper{
        flex-wrap: nowrap !important;
        overflow: scroll !important;
   }
}

</style>

Thank you !

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.

Joybogen
Shopify Partner
5 0 0

Thank you Noah.  I did not want the section to scroll, but rather flow into three columns on mobile.  Currently it goes into 2 and soacing is off.  At the bottom of the page I have a liquid link list.  That might work better but the text is off center and not spaced well.  Please see this image:

Screenshot 2024-04-21 at 9.29.04 PM 2.png

PageFly-Noah
Astronaut
1119 201 220

OK. please help me add again code here:

<style>
   @media screen and (max-width: 767px){
    #shopify-section-template--16917918974092__custom_liquid_mXHte3 .section{
          display: grid !important;
    grid-template-columns: auto auto auto !important;
    text-align: center !important;   
}
  }

</style>

Screen Shot 2024-04-22 at 08.52.42.png


Thank you !

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.

Joybogen
Shopify Partner
5 0 0

Hello again,

 

First thank you so much for your help.  If I am using a liquid section (see photo blow) where to I add the style code?  

 

Joy

Screenshot 2024-04-22 at 8.00.21 AM.png

PageFly-Noah
Astronaut
1119 201 220

 Hi @Joybogen  you can follow image here, add 1 tag <div> above  and 1 tag </div> below, save it and add code here  in file theme.liquid and above tag </head>:

PageFlyNoah_0-1713854991477.png

 

<style>
   @media screen and (max-width: 767px){
    .section_link_custom{
          display: grid !important;
    grid-template-columns: auto auto auto !important;
    text-align: center !important;   
}
  }

</style>

Thank you.

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.