0

I am currently having trouble getting my logo and menu on desktop i need to show my logo left menu right and when on mobile display logo on top menu align center here my code

<nav class="navbar navbar-expand" id="mainNav">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="assets/new_images/logo1.png" width="210px"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">

            <li class="nav-item">
              <a class="nav-link" href="help.php">help</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="status.php">STATUS</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="logout.php">LOGOUT</a>
            </li>

      </ul>
    </div>
  </div>
</nav>
Micron Tagani
  • 11
  • 1
  • 2
  • You haven't provided enough code to give a complete answer, but if you view source on [this page](https://getbootstrap.com/docs/4.0/examples/pricing/) and copy/paste the code for the header, it will give you the end result you're looking for. – Toby Dec 28 '18 at 17:14
  • Please edit, proofread and clarify the question. This isn't clear: *"i need to show my logo left menu right and when on mobile display logo on top menu align center here my code"* – Carol Skelly Dec 28 '18 at 20:21

1 Answers1

2

Check out flexbox with bootstrap 4 You can set default (from smallest size) to sm/md/lg/xl screen size to flex-column then after that set it to flex-sm-row (in this example, I use small screen size.)

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark flex-column flex-sm-row">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
</body>
Victoria Le
  • 860
  • 6
  • 15