Search code examples
cssalignmentcss-floatright-align

CSS: Right aligning navbar and search box / icon together on same row

I'm trying to get a navigational bar and search icon (which using CSS3, expands outward to reveal the search input box) to align next to one another and appear on the right side of my container / div. It has no problem left-aligning. Right is the issue. Here's the current code, which is also at https://codepen.io/anon/pen/KmgoqE and here's the webpage in question: http://vps30689.inmotionhosting.com/~myclar5/

HTML

<header id="masthead" class="site-header">
    <nav id="site-navigation" class="main-navigation">
                <div class="menu-nav-container">
          <ul id="primary-menu" class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          </div>
        <form role="search" method="get" class="search-form" action="http://vps30689.inmotionhosting.com/~myclar5/">
                <label>
                    <span class="screen-reader-text">Search for:</span>
                    <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
                </label>
                <input type="submit" class="search-submit" value="Search" />
            </form>
            </nav>
</header>

CSS

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
    display: block;
    float: left;
    width: 80%;
}
.main-navigation ul {
    list-style: none;
    margin: 30px 0 0 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    color: #333d47;
    display: block;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 18px;
}
/*--------------------------------------------------------------
## Saarch Form
--------------------------------------------------------------*/
.site-header .search-field {
    background-color: transparent;
    background-image: url(http://vps30689.inmotionhosting.com/~myclar5/wp-content/themes/clarity/img/search-icon.png);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}
.site-header .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 230px;
}
.search-form
.search-submit { 
    display:none;
}
Solution

  • Use flex on the parent, and justify-content: flex-end; to move the items to the right, and align-items: baseline to align the menu and icon vertically.

    .main-navigation {
    float: left;
    width: 80%;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}