Reply To: Responsive navigation – hide & move items's to dropdown when space runs out

[grimski]

Thanks @Paulie_D, I was actually just having a look through that article and this one: https://css-tricks.com/diy-priority-plus-nav/

Using Johan van Tongeren’s method I’ve created this:

http://codepen.io/moy/pen/qOYeqN

The desired effect works in principle, but as you can see I have the added complication of a form (search field) in the same bar. I’m playing around with this now but does anyone have an idea for the best approach for this?

In theory, I’m thinking wrapping the current mark-up in a div <div id="menu-bar"></div> and moving the form out of the navigation section, which would mean the nav and form are separate from each other – no luck yet though! The form is currently 200px wide but I’ll shrink this on mobile devices, probably to a button, that when clicked toggles show/hides the form..

It’s maybe worth noting I’ll have another menu similar to this, where a heading is to the left of the navigation. So similar to the mark-up containing the search but with a heading preceding the navigation, inline.

I imagine the mark-up for this would be similar to this (using the example above):

<div class="bar">
    <h2>Heading name</h2>
    <ul>
        <li><a href="#" title="TITLE TEXT.">Menu item 1</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 2</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 3</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 4</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 5</a></li>
        <li class="more hidden" data-width="80">
            <a href="#">More</a>
            <ul></ul>
        </li>
    </ul>
</div>

Cheers,
Steve