diff --git a/addons/website_blog/views/website_blog_components.xml b/addons/website_blog/views/website_blog_components.xml
index 085323a82bc..2d3d787d42d 100644
--- a/addons/website_blog/views/website_blog_components.xml
+++ b/addons/website_blog/views/website_blog_components.xml
@@ -5,9 +5,10 @@
 <!-- ======   Template: Blogs Navbar   =========================================
 ============================================================================ -->
 <template id="blogs_nav" name="Blogs Bar Template">
-    <nav t-attf-class="navbar navbar-expand-sm navbar-light #{additional_classes}">
-        <div class="container">
-            <ul class="navbar-nav" t-if="len(blogs) > 1">
+    <nav t-attf-class="navbar navbar-expand-lg navbar-light pt-4 pb-0 px-0 #{additionnal_classes}">
+        <div t-attf-class="container gap-2 w-100 #{len(blogs) > 4 and 'flex-nowrap' or 'flex-wrap flex-sm-nowrap'}" class="container">
+            <!-- Desktop -->
+            <ul t-if="len(blogs) > 1" class="navbar-nav d-none d-lg-flex">
                 <li class="nav-item">
                     <span class="nav-link disabled ps-0">Blogs:</span>
                 </li>
@@ -21,9 +22,68 @@
                     </a>
                 </li>
             </ul>
+            <!-- Mobile -->
+            <t t-set="wblog_nav_offcanvas" t-value="len(blogs) > 4"/>
+            <t t-set="wblog_all_title_string">All Blogs</t>
+
+            <div t-if="len(blogs) > 1" t-attf-class="order-2 d-lg-none #{not wblog_nav_offcanvas and 'dropdown flex-grow-1 flex-sm-grow-0 min-w-0'}">
+                <t t-if="wblog_nav_offcanvas">
+                    <a class="btn btn-light"
+                       role="button"
+                       t-att-title="blog.name if blog else wblog_all_title_string"
+                       data-bs-toggle="offcanvas"
+                       data-bs-target="#o_wblog_offcanvas"
+                       aria-controls="o_wblog_offcanvas">
+                        <i class="fa fa-navicon" role="img"/>
+                    </a>
+                    <div id="o_wblog_offcanvas" class="offcanvas offcanvas-end d-lg-none">
+                        <div class="offcanvas-header">
+                            <h5 class="offcanvas-title my-0">Blogs</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
+                        </div>
+                        <div class="offcanvas-body">
+                            <ul class="nav navbar-nav">
+                                <li class="nav-item">
+                                    <a href="/blog" t-attf-class="nav-link #{(not blog) and 'active'}" t-att-title="wblog_all_title_string">All</a>
+                                </li>
+                                <li t-foreach="blogs" t-as="nav_blog" class="nav-item">
+                                    <a t-attf-href="/blog/#{slug(nav_blog)}"
+                                       t-attf-class="nav-link #{(blog and nav_blog.id == blog.id) and 'active' or ''}"
+                                       t-att-title="nav_blog.name">
+                                        <span t-field="nav_blog.name"/>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </t>
+                <t t-else="">
+                    <a class="btn btn-light dropdown-toggle d-flex align-items-center justify-content-between"
+                       role="button"
+                       t-att-title="blog.name if blog else wblog_all_title_string"
+                       data-bs-toggle="dropdown"
+                       aria-expanded="false">
+                        <span t-if="blog" class="text-truncate" t-out="blog.name"/>
+                        <span t-else="" class="text-truncate">All</span>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <a href="/blog" t-attf-class="dropdown-item #{(not blog) and 'active'}" title="All Blogs">All</a>
+                        </li>
+                        <li t-foreach="blogs" t-as="nav_blog">
+                            <a t-attf-href="/blog/#{slug(nav_blog)}"
+                               t-attf-class="dropdown-item #{(blog and nav_blog.id == blog.id) and 'active' or ''}"
+                               t-att-title="nav_blog.name">
+                                <span t-field="nav_blog.name"/>
+                            </a>
+                        </li>
+                    </ul>
+                </t>
+            </div>
             <!-- 'Search Box' -->
             <t t-call="website.website_search_box_input">
-                <t t-set="_classes" t-valuef="w-100 w-md-auto pt-2 pt-md-0 d-md-flex"/>
+                <t t-set="_form_classes" t-valuef="#{not len(blogs) &gt; 1 and 'ms-auto'} flex-grow-1 flex-lg-grow-0"/>
+                <t t-set="_classes" t-valuef=""/>
                 <t t-set="search_type" t-valuef="blogs"/>
                 <t t-set="action" t-value="blog_url(tag=tag,search=search)"/>
                 <t t-set="display_description" t-valuef="true"/>