Hello all. I've been searching (googling) for solutions for this issue I'm having for too long, so I thought it high time to seek help!
The website is: heathertucker.ca/fw
I've got two custom interactive-headers that have the nav-menus built into them. One for the main blog, and the other for all pages. I've got them up and running, but the problem is that I can't figure out how to get them to scale for mobile devices.
I've used the same method for creating a custom header for my own site (a work in progress: benldt.com) which does scale well on mobile devices.
The only difference I can see is that my blog doesn't have a scaling feature, while the twenty-eleven theme I'm using for the other site does.
I should also mention that I'm a total amateur. I got this functioning by reading tutorials and through lots and lots of trial and error.
This is the method I've used to implement the headers:
In the header.php:
<ul id="HeaderLinks"> <li id="Bio"><a href="http://heathertucker.ca/fw/bio">bio</a></li> <li id="Awards"><a href="http://heathertucker.ca/fw/awards">awards</a></li> <li id="ShortStories"><a href="http://heathertucker.ca/fw/shortstories">short stories</a></li> <li id="Novels"><a href="http://heathertucker.ca/fw/novels">novels</a></li> <li id="KidsStories"><a href="http://heathertucker.ca/fw/kidsstories">kid's stories</a></li> </ul>
In the style.css:
[CSS code moderated - a link to your site is sufficient to access the styles]
How could I add to this in order to make the header scale when the rest of the content starts wrapping due to a browser window being resized, or when the site is viewed on mobile devices?
Thanks very much in advance for any insight!