How to separate navigation menu from banner image?

Store Design
1

Hi,

I am having trouble finding out how to separate my navigation menu from my homepage banner image.

You can see this problem when you switch to mobile view. The text “100% plastic free” is overlapped by the navigation menu.

My website is: https://ecoduz.com.au/

Could you please help me out. Thank you.

2

Hello,

Add this css theme.min.css You can find this fiel under Assets.

@media screen and (max-width: 600px) {
.banner_image .one-whole{
    margin-top: 25%;
}
}

Thanks

3

Hi Guleria,

Thanks for taking the time in to put in a solution.

Unfortunately, the “Shop now” button is coming onto the section below it. I have attached a photo as an example so you can see.

Is there a way to make the banner image it’s own section? As it seems to be not separated from the navigation menu and the section below it.

Screen Shot 2021-03-11 at 6.22.05 pm.png
Screen Shot 2021-03-11 at 6.22.05 pm.png425×726 94.4 KB

Much thanks.

4

Hi @David-98 ,

It will look like below if you will make header and banner separate in the mobile view.

Prezentech_0-1615457131024.png
Prezentech_0-1615457131024.png323×456 56.8 KB

If you are ok with image then i will share the css to do this.

5

Hi @Prezentech ,

Yes that is the solution I am looking for.

If you could share the code that would be great.

Much thanks

6

Hi @David-98 ,

Remove below code which you added from previous post

@media screen and (max-width: 600px) {
.banner_image .one-whole{
    margin-top: 25%;
}
}

and add

@media screen and (max-width: 480px) {
    .site-header{position:relative;}
}

I hope this will achieve what you are looking for.

Thanks,

1 Like