Responsive blog navigation (pinned posts)

[gytisrepecka]

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

[jakelacaze]

+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.

[cjeller1592]

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.

[gytisrepecka]

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…

[theapiarist]

Has anyone got this working? I’ve dabbled with the list of pinned posts which look great on a laptop, but disappear off screen on my phone. Without a responsive list, I’m currently considering a Menu pinned post as a stop-gap solution … but will then have to hide the system menu in the top left hand corner.

[matt]

Do you mind sharing your site? There are a couple aspects of this – links should normally wrap fine, though links can get broken up across lines, which can be confusing. But some custom themes might break that. Either way, there should be a way to fix this at least with custom CSS for now.

[theapiarist]

Thanks @matt … My site is talks.theapiarist.org and currently uses the Marfa/Cactus theme.

Here’s a screenshot from my phone for good measure …