I am developing a site and have styles set up so that on only the home page the site’s logo, navigation, and footer content all have fixed positions so they remain in the corners of the browser, the rest of the screen is a full page slideshow.
The issue I’m having is on the home page, the logo in the top left corner doesn’t recognize “hover” over most of the image. Also, the social media icon menu, which is the menu with circular icons in the top right, doesn’t recognize “hover” on the first 3 icons and part of the 4th.
I think it has something to do with floats, fixed positions, and their containing elements clearing them, but nothing I try seems to work. It all works fine on the other pages, so I’m sure that it’s isolated to the styles that I’ve attached to just the home page using a “body.menu-home”. I tried applying the clearfix class to the containing elements as described by this site, but either it didn’t work or I applied it incorrectly or to the wrong container.
Some more information: the site is built in Joomla using the blank Gantry Rocket Theme template.
Using the wysiwyg editor, it by default puts a
around images and text. I’ve removed the
using the html editor but it still is giving me the same issue. Only now it seems that it recognizes “hover” above the image in a thin strip on the top right side of the header logo/image.
Out of curiosity, regarding your comment that using fixed positions isn’t necessary to accomplish this, can you recommend another way if you know it?
Without the position:fixed on those elements on the home page they appear, by default, within the body wrapper, which has a default width that I’d like to keep for all the other pages of the site. It’s only the home page that I want to clear as much of the middle of the browser/page so the image slideshow is front and center.