Move search bar to right hand side of navbar-CodePudding

I'm struggling to move my search bar to far right of my navbar. I have reviewed other questions but not fixes seem to work for me.

Some help identifying why would be great.

navbar html

<nav >
  <div >
    <div >
      <a  aria-current="page" href="{% url 'home' %}"
        >Home</a
      >
      <a  href="{% url 'gallery' %}">Gallery</a>
      <a  href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
      <a  href="{% url 'blog' %}">Blog</a>
      <a  id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
      <form  method="POST" action="{% url 'searchblogs' %}">
        {% csrf_token %}
        <i ></i>
        <input type="text"  placeholder="Search keyword" name="searched">
        <button id="search-button" >Search</button>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </div>
</nav>

navbar css

<style>
  .navbar {
    background: black;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
    text-align: center;
    width: 100%;
  }
  .nav-container {
    display: inline-block;
    margin: 0 auto;
  }
  .navbar .navbar-nav {
    padding: 50px;
  }
  .navbar-name {
    text-decoration: none;
    color: white;
    margin-left: 50px;
    margin-right: 50px;
  }

CodePudding user response：

That's an easy fix. Just add a float right CSS to your search bar:

  .navbar {
    background: black;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
    text-align: center;
    width: 100%;
  }
  .nav-container {
    display: inline-block;
    margin: 0 auto;
  }
  .navbar .navbar-nav {
    padding: 50px;
  }
  .navbar-name {
    text-decoration: none;
    color: white;
    margin-left: 50px;
    margin-right: 50px;
  }
    .d-flex {
        float:right;
    }

<nav >
  <div >
    <div >
      <a  aria-current="page" href="{% url 'home' %}"
        >Home</a
      >
      <a  href="{% url 'gallery' %}">Gallery</a>
      <a  href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
      <a  href="{% url 'blog' %}">Blog</a>
      <a  id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
      <form  method="POST" action="{% url 'searchblogs' %}">
        {% csrf_token %}
        <i ></i>
        <input type="text"  placeholder="Search keyword" name="searched">
        <button id="search-button" >Search</button>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </div>
</nav>

**If you run the snippet, make sure you click "full page" to see the effect.

CodePudding user response：

I don't see any styles for navbar-nav. It is a problem, because in row are just inline elements a that's why is form under it. You need to add d-flex.

<div >

and use something for justify elements for spacings see https://css-tricks.com/snippets/css/a-guide-to-flexbox/.