I'm using Bootstrap 4.2.1 and having issues trying to get the brand to appear to the right of my navbar. It's appearing just where I want it in a small viewport -- to the right of the hamburger -- but when expanded to a larger viewport, the logo appears to the left of the navbar items. I've tried using navbar-right, pull-right, float: right, placing the logo code in various spots in the navbar code, but I can't get it to appear on the right of the menu.
I'm probably missing something obvious, but any suggestions on how to get the logo to appear on the right? Here's the page. And below is an example of the code.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
<!-- menu/hamburger button -->
<button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button>
<!-- logo -->
<a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a>
<!-- end logo -->
<div class="collapse navbar-collapse text-center" id="navbarsExample11">
<ul class="navbar-nav align-items-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html">For Teachers</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a>
<a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
