Responsive Bootstrap 4 navbar dropdown-items display as nav-items - drop-down-menu

Question

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;
}

Answer 1

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

Answer 2

Based on the excellent answer by #Zim, I modified the style a bit to fit one by side in a dark navbar. Tested with Bootstrap 5, but I guess it should work in Bootstrap 4 as well.
#media (max-width: 992px) {
.dropdown-toggle {
display: none;
}
.dropdown-menu {
position: relative;
display: contents;
border-width: 0;
padding: 0;
margin: 0;
color: transparent;
}
.dropdown-item {
color: white;
background-color: black;
display: inline;
}
}