Alternative Mobile Background Image 7.1

Site URL: https://www.v6ranch.com/

Hi all,

I'd like to have an alternative image for mobile and desktop on my homepage. I found the code below it and it worked for a few months but now it seems to be affecting the navigation bar both on desktop and mobile. They're working normally on all other pages. (Photos attached) Does anyone have alternative code that will do the trick, or see an issue in this code that would affect the navigation bar?

Thanks in advance! 

Lauren
 

<Style>@media only screen and (max-width: 640px){

#page .page-section:nth-child(1) .section-background img {opacity:0 }

#page .page-section:nth-child(1)  .section-background {

background-image: url(https://static1.squarespace.com/static/620d8cf94e84c814ed5d31ca/t/62f7ff00d583b67a0a57dcc9/1660419842949/Mobile+Home+Page+White+Small.jpg);

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

}

Hi,

What is problem with nav bar?