navegación personalizable/solución de problemas

I'm a complete beginner when it comes to HTML5 and coding in general... I've been prototyping using Zurb Foundation, and have the following code used for my navigation. It works so that when shrunk in dimension (e.g shrinking browser or opening on mobile) buttons appear instead of the text.

The only problem is that I'd like the navigation to line up both in the same row as my upper-left-hand-placed logo, as well as layout horizontal to each other. Right now, the navigation element stacks on top of each other as simple link text. Is this a stylesheet editable trait? Any suggestion on where to start or what code is required for a customizable navigation? Is the mobile version ul class basically messing up my code? (removing it doesn't yield any difference in the full size version...) Thank you so much! Searching has not yielded much so far...

<div class="eight columns">
    <div id="navigation">
        <ul class="hide-on-phones">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">For Sale</a></li>
            <li><a href="#">Contact or Visit Us</a></li>
        </ul>
        <ul class="show-on-phones">
            <li><a href="#" class="large black button">Home</a></li>
            <li><a href="#" class="large black button">Services</a></li>
            <li><a href="#" class="large black button">For Sale</a></li>
            <li><a href="#" class="large black button">Contact or Visit Us</a></li>
        </ul>
    </div>
</div>

preguntado el 22 de mayo de 12 a las 16:05

1 Respuestas

The problem is the style "large black button". This style is intended to extend the full screen width when you are at a "mobile" resolution. You can create your own button like elements by adding a few lines of CSS. I set up a demo for you at jsFiddle that shows how it works. Just take the dividers on jsFiddle and shrink the display until it hits the "mobile" breakpoint.

Enlace: http://jsfiddle.net/fumUp/1/

Code:
    <!-- the inline style below should be moved to your CSS file -->
    <style>
        .mobile-nav a
        {
            border-radius:5px;
            background-color:#000;    
            padding:5px 10px;
        }
        .mobile-nav li
        {
            float:left;
            padding:5px;
        }
    </style>
    <!-- /Inline style -->
    <div class="row"><div class="eight columns">
            <div id="navigation">
                <ul class="hide-on-phones">
                 <li><a href="#">Home</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">For Sale</a></li>
                 <li><a href="#">Contact or Visit Us</a></li>
                 </ul>
                <ul class="mobile-nav show-on-phones">
                 <li><a href="#" class="simple-radius">Home</a></li>
                 <li><a href="#" class="simple-radius">Services</a></li>
                 <li><a href="#" class="simple-radius">For Sale</a></li>
                 <li><a href="#" class="simple-radius">Contact or Visit Us</a></li>
                </ul>
                </div>
            </div>
    </div>​​​​​

contestado el 23 de mayo de 12 a las 13:05

You can see a full site with a similar navigation at rasklusermeeting.com I used foundation to build this. - Ed Charbeneau

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.