Responsive blog navigation (pinned posts)

Currently <nav> element displays flat list (actually, not even <ul>, but just <a>s) of pinned posts. For blogs with longer lists this might not appear nice on mobile browsers.

Shall we have pinned posts as unordered list and make it responsive?

Now I know many responsive implementations require JavaScript, but right here I’ve found one very nice example of pure CSS implementation.

Any ideas?

It would also be nice to have a chance to order pinned posts, but for that we would need drag-and-drop interface in blog settings (will require JavaScript) and ordering enumerator in database for post :nerd_face:

+1 for these requests

In the past I’ve had issues with my nav list in mobile browsers. And it would be nice to more easily arrange the nav list.

1 Like

Great suggestion @gytisrepecka! I wonder if adding a hamburger menu would help — something minimal enough for people to know there’s a menu and to hide multiple pinned posts.

Would love to hear more suggestions about how to better rearrange pinned posts too. That’s definitely something that can be improved.

Yes, hamburger menu would definitely be great! But regular menu should turn to hamburger only when screen width is smaller than expected (usual) menu width.

Also in example I referenced hamburger button is added as extra object in menu HTML code:

    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">About ↓</a>
            <ul class="hidden">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">What We Do</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Portfolio ↓</a>
            <ul class="hidden">
                <li><a href="#">Photography</a></li>
                <li><a href="#">Web & User Interface Design</a></li>
                <li><a href="#">Illustration</a></li>
            </ul>
        </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

Ideally hamburger would be added as object dynamically, but that is perhaps only possible with JavaScript…

2 Likes