Ytukyg

Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/originals.html

I'm attempting to create a responsive navbar in which the current dropdown-items appear as the standard nav-items after collapse.

See this image:

The dropdown-items are displaying as intended on desktop. On mobile, however, the separate dropdown is unnecessary. Here is how it displays with Bootstrap 4 out of the box:

Does anyone know of a convenient or custom solution to remove the dropdown once the navbar-collapse is in use on mobile etc such that the dropdown-items appear just like the navbar-items? Ideally, the "More" nav-link would display:none and the nav-items would continue from "Contact" to "Works On Display" seamlessly.

HTML:

<nav id="navHome" class="navbar navbar-expand-lg navbar-light sticky-top">

  <div class="container-fluid max-width-940">

  <a class="navbar-brand" href="index.html">

    <img src="images/mb.svg" alt="Margaret Biggs" width="220px"/>

  </a>

  <button class="navbar-toggler togglerNoBorder" 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 backgroundWhite" id="navbarNavDropdown">

    <ul class="navbar-nav ml-auto">

      <li class="nav-item active">

        <a class="nav-link" href="bio.html">Bio <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="originals.html">Originals</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="exhibition.html">Exhibition</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="prints.html">Prints</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="professionals.html">For Professionals</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="contact.html">Contact</a>

      </li>

      <li class="nav-item dropdown navDropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

          More

        </a>

        <div class="dropdown-menu navDropdown" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="works-on-display.html">Works on Display</a>

          <a class="dropdown-item" href="poetry.html">Poetry</a>

          <a class="dropdown-item" href="commissions.html">Commissions</a>

          <a class="dropdown-item" href="blog.html">Blog</a>

        </div>

      </li>

    </ul>

  </div>

</div>

</nav>

CSS:

.navbar-right {

  float:right;

}



.togglerNoBorder{

  border: 0px solid transparent;

}



.nav940{

  max-width:940px;

  margin:0 auto;

}



#navHome {

  color:rgb(34, 34, 34);

  font-size:13px;

  font-weight:400;

  line-height:16px;

  text-transform:uppercase;

  background-color:white;

  height:60px;

  box-shadow: 0 0 18px -4px #000;

}



#navHome a{

  color:rgb(34, 34, 34);

}



#navHome a:hover{

  color:#165fa5;

}



.navDropdown {

  font-size:13px;

}



.navDropdown a:hover {

  background-color:white;

}



.backgroundWhite{

  background-color:white;

}



.nav-item{

  padding-left:10px;

}



.dropdown-item {

  padding-top:10px;

}



.navbar-brand {

  margin-bottom:3px;

}



.dropdown-menu {

  top:45px;

}

Use a @media query for mobile (<992px) to show the dropdown-menu as normal nav-links...

@media (max-width: 992px) {

    .dropdown-toggle {

        display: none;

    }



    .dropdown-menu {

        display: block;

        position: relative;

        border-width: 0;

        padding: 0;

        margin: 0;

    }



    .dropdown-item {

        padding: .5rem 0rem;

        color: rgba(0,0,0,.5);

    }

}

https://www.codeply.com/go/lAAQOwhAx0