Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Creating sticky header / transparent logo on Fashionopolism

Creating sticky header / transparent logo on Fashionopolism

Elliot7
Tourist
8 0 4

Hello, im looking for help on how I can create a sticky header for my theme with transparent logo. 
my theme is fashionopolism.

Replies 2 (2)

PageFly-Henry
Shopify Partner
1184 335 292

Hi @Elliot7 ,

 

This is Henry at PageFly - Shopify Advanced Page Builder app.

 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag </body>

 

PageFlyHenry_0-1685452801886.png

 

PageFlyHenry_1-1685452801892.png

 

<style>

#nav {

    background: transparent;

}

</style>

 

Hope this answer helps.

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.

NomtechSolution
Astronaut
1245 113 154
  1. Locate the header section: Look for the header section in the theme files. Typically, it can be found in the "header.liquid" or "header-section.liquid" file within the "Sections" or "Snippets" folder.

  2. Create a sticky header: To make the header sticky, add the following CSS code to the appropriate place within the header section:

 

/* Make the header sticky */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff; /* Replace with your desired background color */
  /* Add any additional styling for the sticky header */
}

/* Add spacing to the content below the sticky header */
body {
  padding-top: 100px; /* Adjust the value to match the height of your sticky header */
}