WordPress.org

Ready to get started?Download WordPress

Forums

How to auto-size a custom header (3 posts)

  1. benldt
    Member
    Posted 2 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.

  2. BeautyPirate
    Member
    Posted 2 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.

  3. benldt
    Member
    Posted 2 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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.