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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024