How to show user's name next to avatar in the navigation when logged in?

Hello All,
Is there a way to show user’s name in the navigation bar next to avatar when user is logged in. See the screenshot below.

name

Hello, welcome back Auston!

Could you try this custom HTML/CSS, please?
This should work fine with all notifications badges with/out the new notifications menu enabled.

I suggest you create a theme component. In case you don’t know, everything is explained here: Beginner's guide to using Discourse Themes

Note: It’s disabled on mobile view.
Note: CSS is based on the default theme; you might need to adjust it. Feel free to ask.

I did not test extensively, but I hope this will work for you!

Head
<script type="text/discourse-plugin" version="0.8.13">

api.decorateWidget('header-notifications:after', dec => {
    const { currentUser, site } = dec.widget;

    if (site.mobileView) {
        return;
    }
    
    return dec.h('span.username', currentUser.displayName);
})

</script>
CSS
html:not(.mobile-view) #current-user {
    span.username {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
    }
    
    .icon.btn-flat {
        width: auto;
    }
    
    .user-status-background {
        left: 22px;
    }
    
    .badge-notification {
        &.with-icon.new-pms {
            left: -3px;
            right: auto;
            top: 4px;
        }
    }
    
    .unread-notifications {
        left: 25px;
        right: auto;
    }
    
    .unread-high-priority-notifications,
    .ring {
        left: -3px;
        right: auto;
    }
}
4 Likes

Thanks a lot. It works :slight_smile:

2 Likes