Trouble with Navbar Bootstrap dropdown

Question

I seem to have the brand name on the left and the nav links on the right. However, I want the drop down to display as a button when the screen is reduced to a smaller size. My code now shows both the stacked menu on the right as well as the dropdown menu button in the middle of the screen. I wish to have the links as is on a large screen, and only the dropdown menu button on a small screen. Example output is: Small screen image and Large screen image

My snippet of this code so far is:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css">

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
 <div class="container-fluid">
  <a id = "siteName" class="navbar-brand" href="../landing.html">Latitude</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="nav navbar-nav navbar-right">
     <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plots</a>
         <div class="dropdown-menu" arialabelledby="navbarDropdown">
         <a class="dropdown-item" href="vis_maxTemp.html">Maximum Temperature</a>
          <a class="dropdown-item" href="vis_humidity.html">Humidity</a>
          <a class="dropdown-item" href="vis_cloudiness.html">Cloudiness</a>
          <a class="dropdown-item" href="vis_windSpeed.html">Wind Speed</a>
    </li>
                                    
    <li class="nav-item">
        <a class="nav-link" href="../comparison.html">Comparison</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="../data.html">Data</a>
         </li>
      </ul>
   </div>
  </div>                  
</nav>

Answer 1

Remove navbar-right from <ul class="nav navbar-nav navbar-right"></ul> and use media queries:

.dropdown-menu {
  border: none !important;
  background: transparent !important;
}

@media only screen and (min-width: 992px) {
  .navbar .nav {
    margin-left: auto;
  }
  .dropdown-menu {
    left: auto !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    background: #fff !important;
    right: 0;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a id="siteName" class="navbar-brand" href="../landing.html">Latitude</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plots</a>
          <div class="dropdown-menu" arialabelledby="navbarDropdown">
            <a class="dropdown-item" href="vis_maxTemp.html">Maximum Temperature</a>
            <a class="dropdown-item" href="vis_humidity.html">Humidity</a>
            <a class="dropdown-item" href="vis_cloudiness.html">Cloudiness</a>
            <a class="dropdown-item" href="vis_windSpeed.html">Wind Speed</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="../comparison.html">Comparison</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../data.html">Data</a>
        </li>
      </ul>
    </div>
  </div>
</nav>