Question 45496 in CSS Question posted in
Some basic documentation can be found here.

Move search bar to right hand side of navbar – CSS

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 class="navbar navbar-expand-lg fixed-top">
  <div class="nav-container">
    <div class="navbar-nav">
      <a class="nav-link" aria-current="page" href="{% url 'home' %}"
        >Home</a
      >
      <a class="nav-link" href="{% url 'gallery' %}">Gallery</a>
      <a class="navbar-name" href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
      <a class="nav-link" href="{% url 'blog' %}">Blog</a>
      <a class="nav-link" id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
      <form class="d-flex" method="POST" action="{% url 'searchblogs' %}">
        {% csrf_token %}
        <i class="fa fa-search"></i>
        <input type="text" class="form-control rounded-0" placeholder="Search keyword" name="searched">
        <button id="search-button" class="btn btn-primary-outline rounded-0">Search</button>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </div>
</nav>

navbar css

  .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;
  }
Tags:

2

Answers


  1. 0

    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 class="navbar-nav d-flex">

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

    Login or Signup to reply.
  2. 0

    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 class="navbar navbar-expand-lg fixed-top">
  <div class="nav-container">
    <div class="navbar-nav">
      <a class="nav-link" aria-current="page" href="{% url 'home' %}"
        >Home</a
      >
      <a class="nav-link" href="{% url 'gallery' %}">Gallery</a>
      <a class="navbar-name" href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
      <a class="nav-link" href="{% url 'blog' %}">Blog</a>
      <a class="nav-link" id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
      <form class="d-flex" method="POST" action="{% url 'searchblogs' %}">
        {% csrf_token %}
        <i class="fa fa-search"></i>
        <input type="text" class="form-control rounded-0" placeholder="Search keyword" name="searched">
        <button id="search-button" class="btn btn-primary-outline rounded-0">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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search