Hello,
Using Capital Theme
I am trying to create a sticky header that moves my Logo from center to left-aligned as the user scrolls down past the initial page load. I also need all elements in the header to be vertically aligned (Vertical Centered). My site (www.Luckindesign.com) aa an example of what I am trying to accomplish see this site (www.rosesandtwine.co.uk)
I’ve tried various CSS coding solutions to achieve the sticky header, but with no success. Right, Now I have the following in Assets/custom.css. but it doesn’t seem to work. Any thoughts
@media screen and (min-width: 749px) {##### header.main-header.sticky {
position: fixed!important;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background: #fff;
transition: .9s ease-in-out;
}
.sticky .header–logo-center-search{
flex: 8%;
position:absolute;
right:5%;
}
.sticky .header{
padding: 0px;
top: 10px;
}##### .sticky .navigation-list{
top: 50px;
padding-bottom:8px;
padding-Top:8px;
}
.sticky .header-logo img
{
max-width:70%;
}##### .sticky .header-logo{
position:absolute;
}
Hi @Lucky07 ,
Can you resend your website link? The link is broken, we can’t access it. If not, can you send us the link to shopify’s domain for us to check?
Thanks you
Certainly
Here is the link to my site Luckyindesign.com.. and here is the link to an example website that has a header like I am trying to mimic www.rosesandtwine.co.uk
Hi @Lucky07
Can you provide password?
Hello Everyone.
I have had a little success with the code below. However it basically just makes the “on-load” header fixed. So when I scroll the header remains in position, which isn’t really ideal. What I am hoping to do is create a sticky header. On scroll, the header reduces in height and the announcement, the bar disappears. The Logo moves to the left and all elements on the header are vertical aligned (Centered) — Here is an example website doing what I’m trying to accomplish (www.rosesandtwine.co.uk )
My Website =Luckyindesign.com
PW = liegla
I have attached a Video of my sight showing what the below code is doing. This code is in Custom.CSS I’m using the Capital theme
/Sticky Header Attempt #01/
#SearchDrawer { z-index:1001; } #shopify-section-header
{ position: fixed!important;
z-index:1000;
left:0;
right:0;
-webkit-box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
-moz-box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
-ms-box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
-o-box-shadow:0px 2px 4px 0px rgba(5,135,138,.1);
box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
background-color: #ffffff; }
#PageContainer { padding-top: 80px; }
@media screen and (max-width: 749px)
{ #PageContainer { padding-top: 70px; } }
Hi @Lucky07 ,
If you want to make the menu sticky when scrolling, you have to use js. This section needs your admin access to customize. If you don’t know the code, you should hire a shopify expert for help
Thanks you
Hello @AvadaCommerce
Thank you, that helps a lot. I have another (no longer active site) with the same Theme, that has the sticky header like what I am trying to accomplish with (Luckyindesign.com). I have the Theme file for that old site and have been attempting to back-engineer how the developer on that side set up the sticky header. (hence my original code I used in custom.CSS).
I was confident that I needed to add code to another location but have been unsuccessful in trying to locate where that code needs to go. Any Idea what the file name would be, or should be?
Hi @Lucky07 ,
Each theme will have its own file name. So I’m not sure which file to guide you. You can hire an expert on shopify, go to your admin to see it.
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Hello @AvadaCommerce
Thank you for your advice. the task seems to be much more complicated than I can accomplish on my own. Yes, I will close the post and make arrangements for additional help to accomplish.
1 Like
