Bootstrap 4 - Responsive + Centred & Word Wrapped navbar-brand

Question

I have been trying to make a bootstrap 4 navbar that has a centered navbar-brand (text) with the emblem on the far left and links on the right I have managed to do this with it being almost correct however I have a large brand name therefore I need it to text wrap when I go below a certain width however instead of it text wrapping it pushes the other elements out of the way before wrapping how can I fix this?

Current code:

 .embelem{ height:40px; width:40px; } @media (min-width: 768px) {.abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); text-align:center; } #title { padding: 13px } }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"> <picture class="embelem"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png"> <img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> </picture> <a id="title" class="sticky-top navbar-brand abs-center-x text-wrap" style="color: #818181;" href="./">The City of Truro Mariners</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="./index">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="./members page">Members page</a> </li> <li class="nav-item"> <a class="nav-link" href="./contact us">Contact us</a> </li> <li class="nav-item dropdown" style="cursor:pointer"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a> <div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="./release/index">App Download</a> <a class="dropdown-item" href="./links">Links</a> <a class="dropdown-item" href="./dates for the diary">Dates for the diary</a> </div> </li> </ul> </div> </nav>

Answer 1

Applying these styles will wrap the text without truncating it:

@media (max-width: 768px){
    .navbar-brand{
        flex: 1 0 100px;
        text-align: center;
    }
}

 .embelem{ height:40px; width:40px; } @media (max-width: 768px){.navbar-brand{ flex: 1 0 100px; text-align: center; } } @media (min-width: 768px) {.abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); text-align:center; } #title { padding: 13px } }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"> <picture class="embelem"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png"> <img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> </picture> <a id="title" class="sticky-top navbar-brand abs-center-x text-wrap" style="color: #818181;" href="./">The City of Truro Mariners</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="./index">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="./members page">Members page</a> </li> <li class="nav-item"> <a class="nav-link" href="./contact us">Contact us</a> </li> <li class="nav-item dropdown" style="cursor:pointer"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a> <div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="./release/index">App Download</a> <a class="dropdown-item" href="./links">Links</a> <a class="dropdown-item" href="./dates for the diary">Dates for the diary</a> </div> </li> </ul> </div> </nav>

Answer 2

replace you navbar-brand css to this code below. and remove.text-wrap class to make it work

 .embelem{ height:40px; width:40px; }.navbar-brand { padding-top: .3125rem; padding-bottom: .3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;important: display; block: width; 50%: min-width; 1px: } @media (min-width. 768px) {:abs-center-x { position; absolute: left; 50%: transform; translateX(-50%): text-align;center: } #title { padding: 13px } }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"> <picture class="embelem"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png"> <img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> </picture> <a id="title" class="sticky-top navbar-brand abs-center-x" style="color: #818181;" href="./">The City of Truro Mariners</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="./index">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="./members page">Members page</a> </li> <li class="nav-item"> <a class="nav-link" href="./contact us">Contact us</a> </li> <li class="nav-item dropdown" style="cursor:pointer"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a> <div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="./release/index">App Download</a> <a class="dropdown-item" href="./links">Links</a> <a class="dropdown-item" href="./dates for the diary">Dates for the diary</a> </div> </li> </ul> </div> </nav>