Currently, I am working on a parallax WordPress site for a client where I have implemented a navbar with a sprite as the background image for each link. You can view the seven-link navbar on this page (). The navbar looks great on desktop screens, but I am looking to make the images responsive, meaning they should shrink in size as the design is viewed on smaller screens.
I attempted to use the background-size setting in CSS within my media query, but encountered an issue where the entire sprite was displayed inside the anchor tag instead of only the designated portion of the image. This led me to contemplate whether it is feasible to achieve this through my current approach or if I will need to create multiple sprites tailored for various screen resolutions. Below is an example of my code for the desktop version:
nav ul.sub-nav li a { background-image: url("../aish/images/subnav.gif"); background-repeat: no-repeat; color: #000; float: left; height: auto; margin: 0; padding: 80px 0 0 0 ! important; font-size: 16px;font-weight: 700; text-transform: uppercase; text-align: center; width: 137px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
nav ul.sub-nav li:first-child a:hover { background-position: 0px -140px; }
And here is the media query implementation for screens with a max-width of 768px:
nav ul.sub-nav { float: none; width: 763px; margin: 0 auto; padding: 0; height: auto; list-style-type: none; }
nav ul.sub-nav li a { background-size: 79.562% 79.562%; padding: 80px 0 0 0 ! important; font-size: 14px; width: 109px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }