Add HTML input tag to to site navigation

Question

I'm building a site using the twentytwelve theme. I need to add an input text box situation on the far left of the menu navigation bar. Here is the HTML from Header.php and the css from style.css.

HTML

<nav id="site-navigation" class="main-navigation" role="navigation">

        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>

        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

    </nav><!-- #site-navigation --

CSS:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    background-color: #000000;
    text-align: right;
    font-size: 50%;
    position: relative;
}
.main-navigation ul {
    margin: 0;
    text-indent: 0;

}
.main-navigation li a,
.main-navigation li {
    display: inline-block;
    text-decoration: none;

}
.main-navigation li a {
    font-size: 120%;
    font-family: 'calibri';
    border-bottom: 0;
    color: #ffffff;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;

}

Can anyone help me get an input text and form embedded into the nav bar? I'll use this for customers to give me their email address.

Answer 1

Put input text tag and wordpress nav in a single div and give them float left and float right respectively. If working then ok or else try to adjust with width.