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
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
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.
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:
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