Nav items disappear when I adjust window size

Question

I am using the collapse feature in bootstrap, but whenever I resize the window my nav elements disappear. Do you guys have any suggestions. My code is below: Navbar | Athletics

    <nav class= "navbar navbar-expand-lg">
        <a class="navbar navbar-brand" href="#"> Athletics 
            <img src="data:image/jpeg;base64,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" width="30" height="25">
        </a>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#"> Shop </a>
                <a class="nav-item nav-link" href="#"> About Us </a>
                <a class="nav-item nav-link" href="#"> Lookbook </a>

            </div>


        </div>

    </nav>


</body>

Please add in what you've tried to resolve the issue, a link to where the problem can viewed and what behaviour you want to happen. — Dean Whitehouse, Nov 04 '17 at 19:27
@DeanWhitehouse the question explains the issue pretty well as is and the provided code clearly shows the problem. The OP could have created a fiddle I guess, but as questions go, this one really wasnt bad. — Wesley Smith, Nov 04 '17 at 19:46
@DelightedD0D a link would have been helpful for people to allow people to look into quicker. I never said it was bad, can always be improved though. — Dean Whitehouse, Nov 04 '17 at 19:49

score 1 · Accepted Answer · answered Nov 04 '17 at 20:12

You are using bootstrap style. In bootstrap navigation, while you are resize the window, menu will be shrink and comes under burger icon. If you dont want burger icon add below class "in"

<div class="collapse navbar-collapse in" id="navbarNavAltMarkup">

If you want default behavior burger icon add below code above line

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    </button><div class="collapse navbar-collapse" id="navbarNavAltMarkup">

<nav class= "navbar navbar-expand-lg">
        <a class="navbar navbar-brand" href="#"> Athletics 
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQHBhQIBxAVFRUXFxgbGRgXGB0WGBoXIxogHxodHSAaICgiHh4lIB0XITEhJSkrLi4uGh8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAMAAvgMBIgACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABwgEBQYDAgH/xABJEAABAwICBAUQCAUDBQAAAAABAAIDBAUGEQcSITFBUWFxkQgTFBYiMkJSVXKBk6GxstEjNDU2YnOiwRVDdIKSJMLwMzdUY9L/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AifFF+nvl8kr6+RxcXnLacmjPYG8QCyrzjasvNlhtVbO8siBHfHN+3Zr8eqNg5Foaz62/zne9eKCVdAeIJoMVizGRxhlY86hOYD2jMEcW4hWOVW9Bn/ceDzZfgKtIgIiw7rcY7TbpLhXO1Y42lzjyD90GYigir0+vFw/0dCzrOfhPPXCPRsHQcuVS5hHEkWK7Gy627PVOYc098x43tPsOfCCCg3aIiAiIgIiICIiAi4HSTpJjwWW0kTOu1DxrBmeTWt25OceXI7P+HQYF0ztvl2bbL3A2EyHJj2ElutwNcDtGfGgl1ERB8TP63EX8QJ6FTbEGIJ79eH3OulcXOcSNp7kcAbxAbtiuPVfVX+afcqQoOlvmNau+WeG1187iyIEbzm/bsL+MgbF0+hzFk9quEtCx5dEYy7UccwHBzRmM92wkFRmut0a/br/yXfGxBzFZ9bf5zvevFe1Z9bf5zvevFBmWyvmttWKm1yPjkGYDmEtcAd+0Lc9ul08oVnrX/NbnQe0P0iwNeM+5l3+YVZ/sVniN6AgqP26XTyhWetf814XDFNfX0bqW41lQ+N2Ws18ji07cxmDy5K3/AGKzxG9AUeaeIWx6PZCxrR9LFuAHhIKyrcWnEFZaacw2iqniYTmRG9zQXZZZ7Dv3LTqxfU7wtkwVKXtB/wBU/eM/5caCGe3S6eUKz1r/AJp26XTyhWetf81bjsVniN6AnYrPEb0BBUft0unlCs9a/wCadul08oVnrX/NWyrDBRU5qKzrTGDe52q1o9JXD1+li0UcvWxJ1zljiJHSQEEC9ul08oVnrX/NO3S6eUKz1r/mrE2LSDa75MIKWeNrzubI3rZP+Qyz5M811/YzPEb0BBUft0unlCs9a/5p26XTyhWetf8ANW47FZ4jegJ2KzxG9AQUuulwmuVWam6SPkkIALpCXOyG7aVjxSGKUSREgg5gjeDwKQtPTAzSC9rAAOtRbtnAo9p/+u3zh70HQ9ul08oVnrX/ADTt0unlCs9a/wCatpT0zDA0lje9HAOJenYrPEb0BBUc4zuZGRr6v1r/AJrmldiqpmCmeQxvengHEqToC63Rr9uv/Jd8bFyS63Rr9uv/ACXfGxBzFZ9bf5zvevFTziTQX2beHVVmqmxxvcXFj2klpJ2hpB2jnyWZetB8FRZIaa1Tak0YIdI5uYlzOebgN2XBlnkOPegjnQYM9I0Hmy/AVaRRxoz0XtwdWOuNZMJZi3VbqjJrGnflntJO7M8CkdAUead4+uaOZXDwXxH9YH7qQ1yGlml7L0eVjBwM1v8AFwd+yCpasT1OM2thOeAeDUE9MbP/AJVdlOXU11gHZlCTt+jeOYawPvagnFYN5ukdmtklxr3ascbS5x5uAcp3LOUSdUZcnU2GYLfHsE0pLuZgzy6XNPoQRBjvGs+MbkZ6txbED9HED3LR+7uMrlkRAUwaHNJMlFXssF9kLoXkNie45mN/A3PxDu27jyZqH19NcWODmnIhBeFFp8H3E3fCtLcJO+khjLvO1Rre3NbhBWDTy/X0iyt8WOIfoz/dcDRt16tjBwuaPauo0sVnZ2kKsk4pNT/EBv7LUYTpTW4npaZoz1pox+oILkQjVhaDxD3L0REHlVfVX+afcqREZHIq8JGYyKhPEGgrsu7uqLRVtjie4nUe0ktzO0NI3jnyQQSut0a/br/yXfGxSxfdCENRZ4aa0T9bljBDnvGYlzOebgNxHBlns2cq2mjrRVHhZ76q5SCeV7dXYMmNbnmcs9pJIG3kQSUiIgIiICwrzRfxK0zUJ/mRvbt5WkLNRBSGeIwTuhfvaSDzg5LvtBd2/hmPGQvOTZ2uj/uO1vtGSxtMlhNjxzMWjJk30rOLuu+HodrexcZSVLqOqZVU51XscHNI4HA5goLuKIuqNt7p8N09fHtEUpDuQPGw9LQPSu+wViRmKcOx3SnIzIye3xZB3zf3HIQs++WqO92mS214zZI0tPHyEco2FBSxF0uN8HT4Puhpa5ubCT1uQDuXt+fGFzSAvpo1nZBfKlrQ3o5kutey/wB4YW08ZDo2uG2V43HI+AN+fCdg4SAm/BlvNqwnS0MvfMhjDvO1Rn7c1sLnWNt1tkrZzk2NjnnmAzKylEWn7FgoLMMO0jvpJsjJl4MQO48RcQPQDxoICr6o1tdJVy73vc4+k5rs9Cdt/iOkKBxGYiDpDyZDZ+otXBqfepzsJgt099mG2QiNnmN2u6Xao/tQTMiIgIiICIiAiIgIiICIiCPtMuDjijDfX6JudRBm5gG9zfDZz8I5Ryqr5GqcirwqFdLGih1ZM6+YXZm85mWEeEeF0fLxt6OJBF2B8aVGDLiaihIcx2XXInHuXD9nDgPvU3W7TdbqimD6zr0LuFpZr9Bbnn7FW2aIwymOZpaRsIIyI9C80Fl7jpWstzpDSXFzpGHe18DnD2jfy71wlaMLVUxkY+pj5GB+r+ppURogmqx3HDFmmE8bZZXDcZo3yZejLV9i7ZumW1NGQmk9U/5Kr6ILBYo0508FKY8NxPlkI2PkGoxvLl3zubZzqCbpcZLtXvr7g8vkec3OP/N3IsNbOw2KfENeKK0ROkeeLcBxuO4DlKD9w1Y5cR3qO10Aze85Z8DW8LjyAbVb+xWqOx2eK10QyZE0NHLxk8pOZ5yua0bYBiwXb9Z2T6h4+kk4vwt4mjpJ2ngA7VAREQEREBERAREQEREBERAREQc7iPBNFiXurtTNc7x29w//ACbkT6c1Ue4RCCvkhj3Ne4DmByV2lSe7/as35j/iKDEREQEREHdaHsOQYnxYaG8ML42wvfqhxbm4OaBmRty2lWZtFngslL2LaYGRM4mDLPn4SedV86nf7+P/AKaT42KyaAiIgIiICIiAiIgIiICIiAiIgIiICpPd/tWb8x/xFXYVJ7v9qzfmP+IoMRERAREQSh1O/wB/H/00nxsVk1Wzqd/v4/8AppPjYrJoCIiAiIgIiICIiAiIgIiICIiAiIgKk93+1ZvzH/EVbfFGM6PC0Wd3na13BG3upD/aPecgqi18oqK6SZm5z3EcxOaDHREQEREEodTv9/H/ANNJ8bFZNVU0QYlgwtis112Lgx0TmZga2RLmnM8nclWdtV1hvFIKu2SslYfCYc+niPIUGciIgIiICIiAiIgIiICIiAiLyqJ200Dp6hwa1oJcTsAA3koPypqWUlO6oqnBjGjNznHIAcpUFaQdM76h7rfhE6jNxnPfO8weCPxHbxZLm9KmkZ+LK00NvcW0jD3LdxkPjO5OIcG/eo7QetRO6pnM9Q4uc45lzjmSeUleSIgIt7YcIVuICP4TSSPG7Wy1Wf5Oyb7V29u0FV9QM62WCLk1i8/pGXtQRWike6aFrnQtL6dkUw/9b+66H6vszXC3O0z2mfrFzgkidxPaW+9BhLaWDEFRh2tFZZ5nRu4cu9dyOB2EchWrRBZjRzpXhxM5tuu2rDU7ht7iU/hJ3O/CfRxKS1R5rix2s05EKwOhzSWbtq2DED/pgPopD/MHiuPj8R4efeEwIiICIiAiIgIiICIiAoO0+41IPatbncTpyOlsf+4+gcal/EF1bY7JNdKjvYmF3ORuHpOQVOLnXPudwkr6s5vkcXOPKTmgxURbjC9hlxNe47VQDunnaTua0d848wQfeFsMVGKLiKK0xlx3ucdjWDjceD91YLBmiKjsDGz3JoqZ9h1nj6Np/Czd6XZ+hdXhPDUGFbQ23WxuQHfOPfPdwud8uBbtB8MYI2BjAABuA3L7REBYdytsV0pjTXGFkjD4L2hw9qzEQQljrQk10bq3CJyO8wPOw+Y47uZ3TwKD6qmfSVDqaqYWPacnNcMiCOAhXdUbaXNHbcUUBudsZlVxjZl/NaPAP4vFPo4sgrKvWCZ1PMJoHFrmkEEbCCNxC+HNLHarhkRxr5QWx0X4wGL8NNnmI69HkyUDxstjuZ2/nzXZKrWhfEZsGNI4pHZRVH0T+LM9470OyHMSrSoCIiAiIgIiICIiCK+qGupo8IR0DDkZ5Rn5jBrH26irgpj6pKqLr7SUZOxsLn5crn5f7AocQFYrqfcNi34edfJx9JUHJvJE0/7nZn0NVd2t13hreHYrm4YoRbMO09CwZakTBly6oz9uaDaIiICIiAiIgIiIKxaccNCxYvNXTDKOpBkGW4PzykHTk7+5RyrG9UTbxUYRiruGKYD0OBB9oaq5IPuKQwyCSM5EEEc4VzMM3IXfD1PcR/MiY485G325qmCtNoQrOy9HNO074zIzoeSPY4BB3qIiAiIgIiICIiCuHVE/fSPP/wAdvxOUVqzOmXAT8WUDK+1AGohBGqTl1yM7S0coO0ceZHEq51dqno6g09XBIx43tcxwPuQeVA3Xro2jbm9o9oV2gMhkFXfRHo2nrbxHer3E6KGJwe1rxk6Rw73YfBB258O5WJQEREBERAREQEREHBacIjJo5nIGeq6M83dgfuqsq6d+tTL5Z5bXWDuJWFp4xxEcoOR9Cqpi7A1XhauMNbC5zM+5lYCWOHBtG48h2oOXVl+p8+4J/Pk9zVA+G8IVeI6wU1tgedu15BaxvK5x2ehWqwhYGYZw9Daac56jdrvGcTm4+kkoN0iIgIiIP//Z" width="30" height="25">
        </a>
  <!-- toggle navigation
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  </button>-->
        <div class="collapse navbar-collapse in" id="navbarNavAltMarkup">
            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#"> Shop </a>
                <a class="nav-item nav-link" href="#"> About Us </a>
                <a class="nav-item nav-link" href="#"> Lookbook </a>

            </div>


        </div>

    </nav>

I used your method, and I get the burger icon. Although, when I click on the icon the menu does not drop down. I included a link to my code. https://jsfiddle.net/mcoulibaly23/9sn2kx58/ — Mamadou Coulibaly, Nov 06 '17 at 05:53
Add dependency external resource in jsfiddle like bootstrap.min.js and jquery.min.js files. — VIJAYABAL DHANAPAL, Nov 07 '17 at 18:15

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

This is the correct behaviour for bootstrap.

It's meant to re-organize the bigger elements when viewed on smaller screens.

What you need to do is include the navbar-toggle element and link it to your navigation menu with data-target="#navbarNavAltMarkup". Also, the a tags in your menu need to be inside of li tags that themselves need to be in a ul tag.

This structure will do what you need:

working jsFiddle

<nav class="navbar navbar-inverse navbar-static-top navbar-expand-lg" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="nav-brand" href="#"> Athletics 
            <img src="" width="30" height="25">
        </a>
    </div> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <ul class="nav navbar-nav">
          <li><a class="nav-item nav-link" href="#"> Shop </a></li>
          <li><a class="nav-item nav-link" href="#"> About Us </a></li>
          <li><a class="nav-item nav-link" href="#"> Lookbook </a></li>
        </ul>
      </div>
    </div> 
  </div>
</nav>

If you are looking to disable this behavior instead, see Bootstrap 3 - disable navbar collapse

Nav items disappear when I adjust window size

2 Answers2

working jsFiddle