Responsive blog navigation (pinned posts)

Feedback Feature requests
1

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:

2

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

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.

1280×694

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

4

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
5

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.

6

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.

7

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 …

Screenshot_20250108-152512
Screenshot_20250108-152512360×800 50.6 KB

8

It’s possible to put the pinned links down the left. That’s what I do on Coffee 22 — LMJargon - I don’t have it perfect, but it got close enough that I quit fiddling with it.

Feel free to ask about what I did, though it’s been months, so I don’t remember any details at the moment.

9

Regarding the links disappearing on a phone, ISTR there’s a minimum screen width in the default css, and a screen narrower than that loses the nav entirely. I remember fiddling with that now…

10

This is definitely not the most elegant solution, but this did help address the issue somewhat on mobile:

@media screen and (max-width: 700px) {
    
    body#collection header {
        margin: 1.5em auto 1.5em;
    }
    
    body#post header, body#subpage header {
        display: inline-grid;
    }
    
    body#post header nav, body#subpage header nav {
        margin: 0;
    }
    
    body#collection header h1, header nav {
        overflow-wrap: break-word; /* Allow overall nav to wrap links */
        display: inline-flex;
        flex-direction: column;
    }

    body#collection header nav {
        overflow-wrap: break-word; /* Allow overall nav to wrap links */
        display: inline-flex;
        flex-direction: column;
    }
    
    #post nav a:not(.home), header nav a {
        margin: 0;
    }
    
    body #post header nav a.pinned + .pinned, body #post header nav span.pinned + .pinned, body#collection header nav a.pinned + .pinned, body#collection header nav span.pinned + .pinned, body#post header nav a.pinned + .pinned, body#post header nav span.pinned + .pinned, body#subpage header nav a.pinned + .pinned, body#subpage header nav span.pinned + .pinned {        
        margin: 0;
    }
    

    body #post header nav a.pinned, body #post header nav span.pinned, body#collection header nav a.pinned, body#collection header nav span.pinned, body#post header nav a.pinned, body#post header nav span.pinned, body#subpage header nav a.pinned, body#subpage header nav span.pinned {
        margin: 0;
    }
    
    body#collection header nav a, body#subpage header nav a {
        margin: 0;
    }

    body#collection header nav a:first-child, body#subpage header nav a:first-child {
        margin: 0;
    }
}
11

Many thanks, I’ll try that.

12

You could use a show/hide menu, like I’ve done on my blog’s home view. Feel free to grab that code if it works for you.

Also note that it doesn’t require adding a new HTML element, as @gytisrepecka mentioned with the solution he found. You can use CSS to inject a :before pseudo-element that’s clickable.

1 Like