show/hide() changing block level element's width/behaviour?
<p>I'm really stuck with this one and have no idea how to solve this, I use jQuery ~ usually without too many problems. But as I don't write JS I do get stuck :(
I've searched and searched for answers and tried out too many approaches and not getting anywhere... :( I bet I'm missing something very obvious or simple, hoping someone might be able to help...</p>

<p>ok - the problem:
I have a website for my webdesign course which shows the main nav in the left column. For the smallest screens (ie below 420px width) - I want to hide the menu, displaying a 'view menu' link instead which uses the jQuery toggle() function to show / hide the menu on demand.</p>

<p>Initially, I did this via a straight forward toggle alone - all fine - apart from the issue that the menu would remain hidden once it was shown and hidden once on a small screen. If the window is resized - it would remain hidden.</p>

<p>That was the problem I set out to solve, mentioning it here as I might be going down the wrong path entirely here ~ doubting whether I'm doing this in the right way :'(</p>

<p>Now - I am using JS to hide the 'view menu' link for all screens, only showing on screens smaller than 420px. I've added the resize() function as well to allow more dynamic behaviour.
Everything is working as intended for the showing and hiding of my menu - BUT....</p>

<p>The toggle link itself is set to display:block - when the window loads below 420px, it displays as intended: set to block (spanning full width for a nicely solid active link) with the text centred.
However, when I load the page at larger window size, then resize to below 420px width - the toggle link seems to become inline? Not at full width any longer, text appears to be left aligned as the element no longer is full width...?!</p>

<p>I've tried setting width in CSS, tried resetting with via resize() element, via assigning 100% width via JS....nothing is working - I'm sure I'm missing something....</p>

<p>I'd really appreciate any pointers or thoughts ~ feel like I'm missing something very basic here....</p>

<p>the website: <a href="http://webeyedea.info" rel="nofollow">webeyedea.info</a></p>

<p>here's my JS code, following the link to jQuery:</p>

<pre><code>// check for window size size on page load and show relevant content only 
$(function() {
    if ($(window).width() &gt; 420) {
        $('#toggle-nav').hide();
        $('nav ul').show();
    }
    else {
        $('#toggle-nav').show();
        $('nav ul').hide();
    }
});
// check for window resize - show nav again for larger screens after hiding
$(window).resize(function() {
    if ($(window).width() &gt; 420) {
        $('#toggle-nav').hide();
        $('nav ul').show();
    }
    else {
        $('#toggle-nav').show();
        $('nav ul').hide();
    }
});

// show menu (smallest screens)
$('nav #toggle-nav').click(function() {
    $('nav ul').slideToggle('slow', function() {
        // Animation complete.  
    });
    $('ul').addClass('view');
});
</code></pre>

<p>UPDATE: SEE <a href="http://jsfiddle.net/eyedea/HWmp3/1/" rel="nofollow">JSFIDDLE</a></p>
