Custom navigation

[kskruse]

Currently, the top 3 buttons (Give, Advocate, Volunteer) are in the header right widget. If you resize the page, rather than the buttons resizing, their alignment changes. I have uploaded the images through FTP and they do not have a size indicated. I need for them to reduce in size as the page size reduces.
>
> The same things happen to the images in the footer. The footer images are in the media library so they do have a size.
>
> Another option for the 3 top buttons would be to have them as the background in the navigation, but I cannot figure out how to code a different image for each li element.
>
> Another issue is that if you change the screen resolution, the left column resizes leaving blank space between it and the center content. I'm thinking that changing from px width to % width would be the answer for this, am I correct?
>
> I am doing this as a community service project (no pay!) and have spent hours trying to figure this out. Any help you can give will be greatly appreciated. I understand html and css and nothing about php.
>
> I am using the Eleven40 theme. If there is a different theme that would be more appropriate for this type of layout, please let me know.
>
> URL
> http://www.unitedwayroane.org/2012/
>
-

[Au Coeur]

If you want the images to reduce in size with the page, you need to create different CSS rules targeted at at different screen sizes. See http://www.studiopress.com/design/website-respond-mobile-devices.htm Setting them as background images will not change their size with screen size.

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[kskruse]

Thank you for your help. I did set up a different CSS style for each of the navigation elements I needed an image for. I also changed themes to the Corporate theme. Here is the outcome: http://unitedwayroane.org/2013/. The corporate theme seems to be a little more responsive to smaller screen sizes. I will keep your notes. I really appreciate your taking the time to respond and I'm sure there will come a time when I need them.

[Author]

Posts