What can fix the overlapping issue in my Shopify Crave Theme's vertical menu?

Nivek
Shopify Partner
6 0 2

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)

Replies 7 (7)

KetanKumar
Shopify Partner
36839 3635 11972

@Nivek 

can you try this way sticky code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nivek
Shopify Partner
6 0 2

@KetanKumar 

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?

KetanKumar
Shopify Partner
36839 3635 11972

@Nivek 

i can see your code doesn't work all device it can be done some customization code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nivek
Shopify Partner
6 0 2

@KetanKumar 

Any ideas on what to do?

KetanKumar
Shopify Partner
36839 3635 11972

@Nivek 

yes please redevelop this section customization like left side bar 25% and content 75% all screen work as well 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nivek
Shopify Partner
6 0 2

@KetanKumar 

but this is not a sidebar, this is 2.0 theme and is inside the header...

KetanKumar
Shopify Partner
36839 3635 11972

@Nivek 

i mean create  custom sidebar if you are able to code HTML, CSS, Luquid And S

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing