Creating sticky header / transparent logo on Fashionopolism

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)
503 128 101

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>







#nav {

    background: transparent;




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.

1245 112 141
  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 */