Shopify themes, liquid, logos, and UX
Created a vertical main menu in crave theme with the following css:
.header__inline-menu {
position: absolute;
top: 160%;
left: 120px;
}
.list-menu--inline {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
background-color: #55782b;
}
.header__inline-menu .link {
font-size: 1.8rem !important;
}
But now when the screen size changes it overlays on the images on my page (lowtru)
I know it has something to do with the display type, but how do I make it stick to the left of the side and not overlap the images. (so on resize/smaller screens the images should move with)
can you try this way sticky code
This does not help it resize when the screen get smaller just puts it in a fixed position you can't reach/see. Also doesn't need to be sticky.
changed it to this now so it won't overlay the picture:
.header__inline-menu {
height: auto;
width: 210px;
float: left;
position: relative;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
top: 160%;
left: -300px;
}
.list-menu--inline {
width: 200px;
height: 300px;
position: absolute;
flex-direction: column;
background-color: #55782b;
}
anybody know how to get it to resize with the website?
i can see your code doesn't work all device it can be done some customization code
yes please redevelop this section customization like left side bar 25% and content 75% all screen work as well
but this is not a sidebar, this is 2.0 theme and is inside the header...
i mean create custom sidebar if you are able to code HTML, CSS, Luquid And S
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024