Multiple background imgs

hello i have 2 problems i wish i get some help okay here s the template

in the id .navbar i set it to sticky but i doesn t work don t know why i set the top to 0 ;
also when i hover on the titles (golf1 golf2…) i tried to make some images appear while hovering on them
i tried to set two images appear on each title but the second image won t appear
wish someone could help me thankss

Hi @khalil2210 ,

The background-position of top right does not need a hyphen in between. Check your code:
background-position:center,top-right; ← remove the hyphen and both images will be displayed

I think you’ve already figured out why the last image wasn’t being displayed - can see the image on your page :slight_smile:

1 Like

thank you . so the only problem that remains is when i set the .navbar position to sticky it doesn t stick

position: fixed

Would that work instead?

it will get fixed but i will get an empty space when i scroll downand if i adjust the top it get into the image on top and hide it

Maybe it has something to do with that navbar div not being closed properly. I don’t know, just trying to rule it out:

Screenshot 2021-08-23 153359

i corrected it and the problem still
maybe it has something to do with positioning absolute or relative i don t know

My last idea is to wrap the navbar div in its own wrapper/container div. Right now it’s parent is the Body. All the examples I’ve looked at the over the past couple hours of researching have shown a parent (other than Body) wrapped around the sticky div. If that doesn’t work, someone smarter than me will have to chime in.

1 Like

Hey @khalil2210 ,

position of fixed should work to fix the vertical navbar. The reason why we get an empty space is because the head (i.e the image on top) also moves along with the entire content, hence creating the blank space on top of the navbar.

So, the solution could be to fix the head as well. On changing the position of head as fixed. And on removing the position of absolute of the main content (had to add margin-left of 35 rem to position it correctly), I can get the navbar to stay put as below:

1 Like

well i tried but wasn t the case . thanks mate i really appreciated your support

1 Like

well it is fixed now thank you so much although i didn t want for the head image to be fixed so i an get more space but the navbar is now fixed .
i will try to understand more about positioning and these stuffs before moving to javascript

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.