Question: I recently wrote some code that takes user input and performs a function which returns an output.

Initially, I gathered the input via a prompt box. 

```
var a = prompt("What month were you born?");
var b = prompt("What day of the month were you born?");

```

The rest of the code I wrote is dependent on these two variables (`a` and `b`).

My question is: 

How do I attach the same data to the variables but instead of using a prompt, I would like the user to fill out a text field and then press submit. After they press submit, I would like the rest of the code to be executed.

I have been having a really hard time understanding what happens to the data in a field after the user presses submit.

I can very easily create a field with a submit button. The problem is that the button doesn't actually DO anything.

Answer: 
navbar-fixed-top has a fixed height 50px, so you can directly style an image by setting e.g. `max-height: 40px` to it and `margin: 5px` to center image.

```css
.navbar-header img {
  height: 40px;
  margin: 5px;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="navbar-header">

    <img src="http://lorempixel.com/225/225" class="img-circle">
    </div>

    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">Liens</a> </li>
        <li> <a href="#">Login</a> </li>
        <li> <a href="#">Signup</a> </li>
      </ul>
    </div>
  </nav>
```
I had the same problem sometime back and this is what I did . Hope this works for you

```css
.brand{
 max-height: 30px;

}
```

```html
 <a href="link/location/here" class="img-circle">
   <img class="brand" src="img/logo.png">
 </a>
```