CODEWITHSUNDEEP
htmlcss
Joshua Vaughan
Joshua Vaughan

Reputation: 347

HTML nav bar how to align search bar to right side of screen

I'm coding a webpage in HTML and I am trying to figure out how to align the search bar to the right side of the navigation bar. Below is my HTML used for the nav bar, as well as the CSS code.

HTML:

<div class="naviagion">
        <div class="col-md-10 col-md-offset-1" id="test">
            <ul class="nav nav-pills">
                <li class="page-title"><a href="index.html"><h4>Josh's Blog</h4></a></li>
                <li class="active"><a href="index.html">Home</a></li>
                <li class="menu-item"><a href="source/posts.html">Blog Posts</a></li>
                <li class="menu-item"><a href="source/projects.html">Projects</a></li>
                <li class="menu-item"><a href="source/about.html">About</a></li>
                <li class="menu-item"><a href="source/contact.html">Contact</a></li>
                <!-- Search Bar -->
                <li id="search-bar" align="right">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                    </form>
                </li>


            </ul><br>
        </div>
    </div>

CSS:

    #search-bar {
    margin-top: 19px;
}

.page-title {
    padding-right: 50px;
    margin-top: 17px;
}

.menu-item {
    margin-top: 25px;
}

#test {
    background-color: #f1f1f1;
}

.active {
    margin-top: 25px;
}

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}

/* Set gray background color and 100% height */
.sidenav {
  background-color: #f1f1f1;
  width: 100%;
}

/* Set black background color, white text and some padding */
footer {
  background-color: #555;
  color: white;
  padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {height: auto;} 
}

Upvotes: 1

Views: 21379

Answers (2)

Scriptomaniac
Scriptomaniac

Reputation: 232

In the css, give this to the class that is the main wrapper div of the search bar.

float: right;

Upvotes: 0

Seva Kalashnikov
Seva Kalashnikov

Reputation: 4402

It looks like you using Bootstrap

Apply class="pull-right" to #search-bar 

<li id="search-bar" class="pull-right">
...
</li>

Or defined this class in your css file if you don't have Bootstrap included

.pull-right {
    float: right;
}

Upvotes: 6

Related Questions