arca desplegable @Navbar y lista desplegable para dispositivos móviles en la misma línea bootstrap 4

Question

Aug 10, 2018, 06:24 PM

twitter-bootstrap navbar css html bootstrap-4

arca desplegable @Navbar y lista desplegable para dispositivos móviles en la misma línea bootstrap 4

Actualmente estoy teniendo problemas para que mi logotipo y el menú desplegable del dispositivo móvil permanezcan en la misma línea cuando el tamaño de la pantalla está por debajo de cierto punto. He intentado realizar consultas con los medios para que la imagen sea más pequeña, pero sigo teniendo el mismo problema. Leí en otra publicación aquí para usar css para establecer el fondo de la marca de la barra de navegación en lugar de incrustarlo con una etiqueta img, pero cuando intenté que la imagen no apareciera.

Aquí está mi html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">

<title>Pristine Clean Outs | Home</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Carousel style-->
<link href="css/carousel.css" rel="stylesheet">

<!--Custom Styles-->
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">

<header>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md navbar-light fixed-top bg-white">
      <a class="navbar-brand" href="index.html"><img class="img-fluid logo" src="img/pristinelogo.png" alt=""></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <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">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

aquí está mi CSS

/* Custom Styles for Pristine Clean by David Jacoby */

nav li {
  font-size: 22px;
}

.carousel-item {
  text-shadow: 2px 2px #000000;
}

.port-image {
  width: 100%;
}

.gallery_product {
 margin-bottom: 30px;

}

.contact-ul li {
   font-size: 24px;
   list-style-type: none;
}


/* MEDIA QUERIES */

@media (max-width: 768px) { 

.logo {
    width: 70%;
    height: auto;
}

}