How to auto-size a custom header

  • benldt

    (@benldt)


    12 years ago

    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!

    Benldt.

Viewing 2 replies - 1 through 2 (of 2 total)
  • BeautyPirate

    (@beautypirate)

    12 years ago

    Solution 1: Plugin WP-Touch.
    Solution 2: CSS Mobile device alterations:

    /* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */

pre {
	-webkit-text-size-adjust: YOUR%;
}
code {
	-webkit-text-size-adjust: YOUR%;
}
#access,
.entry-meta,
.entry-utility,
.navigation,
.widget-area {
	-webkit-text-size-adjust: YOUR%;
}
#site-description {
	-webkit-text-size-adjust: YOUR%;
}

    I´m using the definition “none” by the way so my sites look SIMILAR on iphones and computers. MIGHT work for you.

    Thread Starter benldt

    (@benldt)

    12 years ago

    Hello!

    Thanks very much for the suggestions, but they didn’t work for me, unfortunately. I think this might have something to do with my not using the built-in navigation. The header and the navigation built into it are custom.

    Anyone else have any other suggestions?

    Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to auto-size a custom header’ is closed to new replies.