How can I prevent my vertical main menu from overlapping images on different screen sizes?

[Nivek]

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)

[KetanKumar]

@Nivek 

can you try this way sticky code 

[Nivek]

@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]

@Nivek 

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

[Nivek]

@KetanKumar 

Any ideas on what to do?

[KetanKumar]

@Nivek 

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

[Nivek]

@KetanKumar 

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

[KetanKumar]

@Nivek 

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