i_am_no_frontend_dev.js

var selfNameTopOffset;
var navbarCollapsed;

$(function() {
  . . . 
	normalNavBarHeight = $('#pnavbar').height();
  selfNameTopOffset = $("#selfName").offset().top;

  $(window).on('resize', debounce(handleWindowResize, 50));
  handleWindowResize();	
});

function handleWindowResize() {
    const $elements = $('#pageTitle4, #pageTitleSeperator4, #pageTitle3, #pageTitleSeperator3, #pageTitle2, #pageTitleSeperator2, #pageTitle1, #pageTitleSeperator1, #selfName');
    const currentSelfNameTopOffset = $("#selfName").offset().top;

    if (currentSelfNameTopOffset > selfNameTopOffset && !navbarCollapsed) {
        hideNavBarHeightLimit = $(window).width();
        navbarCollapsed = true;
        $elements.filter(':visible').attr('data-navbar-width-hide', true).hide();
    }

    if ($(window).width() > hideNavBarHeightLimit + 15 && navbarCollapsed) {
        navbarCollapsed = false;
        const visibleElements = $elements.filter(function() {
            return $(this).attr('data-navbar-width-hide');
        });
        visibleElements.show().removeAttr('data-navbar-width-hide');
    }
}

***************
*     HTML    *
***************
<div class="pnavbar" id="pnavbar">
			<span id="leftNavBar">
				<a class="pageTitle" href="/"><i class="bi bi-house"></i></a>&nbsp;
	
				<!-- 4 -->
				<span class="pageTitle none" id="pageTitleSeperator4">&nbsp;/&nbsp;</span>
				<a href="#" class="pageTitle none" id="pageTitle4Href">
					<span id="pageTitle4"></span>
				</a>			
				<!-- 3 -->
				<span class="pageTitle none" id="pageTitleSeperator3">&nbsp;/&nbsp;</span>
				<a href="#" class="pageTitle none" id="pageTitle3Href">
					<span id="pageTitle3"></span>
				</a>
				<!-- 2 -->
				<span class="pageTitle none" id="pageTitleSeperator2">&nbsp;/&nbsp;</span>
				<a href="#" class="pageTitle none" id="pageTitle2Href">
					<span id="pageTitle2"></span>
				</a>
				<span class="pageTitle none" id="pageTitleSeperator2">&nbsp;/&nbsp;</span>
				
				<span class="pageTitle" id="pageTitleSeperator1">&nbsp;/&nbsp;</span>
				<span class="pageTitle" id="pageTitle"></span>&nbsp;&nbsp;
				<button class="btn btn-primary none buttonNavBar" id="edit">Edit</button>
				<button class="btn btn-primary none buttonNavBar" id="previewReport">Preview Report</button>
				<button class="btn btn-primary none buttonNavBar" id="saveAsPdf">Save as PDF</button>
				<button class="btn btn-primary none buttonNavBar" id="saveAsXls">Export XLS</button>
			</span>
						
			<div class="right">
				<span id="selfName" th:text="${selfName}"></span>&nbsp;<button class="btn btn-secondary" id="helpBtn">?</button><span th:if="${localAuth}"> <button class="btn btn-primary" id="logoutBtn">Logout</button></span> 
			</div>
		</div>