How do you add a search input box and icon to a navigation menu?

Question

I'm trying to create a responsive webpage using all of the features taught in the web design track including flexbox and CSS grid. I've created a navigation menu and to the right of it I've added a search input box and icon. Renders great on a desktop, but when I reduce the viewport, these two elements do not center and the icon detaches from the input box.

This is the HTML in the <header>

<h1 class="name"><a href="#">Responsive<span>Website</span></a></h1> <ul class="masthead-nav"> <li><a href="#">Account</a></li> <li><a href="#">Help</a></li> <li><a href="#">Logout</a></li> <li class="search-container"> <form action=""> <input class="search-input"type="text" placeholder="Search..." maxlength="50"> <button class="search-button" type="submit"><i class="fa fa-search"></i></button> </form> </li> </ul> </section>

Here is the associated CSS...

.masthead { background-color: #000000;
}

.name { padding-left: 15px; } .name a, .masthead-nav a { font-size: .95em; color: #ffffff; text-transform: uppercase; text-align: center; display: block; padding: 10px 15px; text-decoration: none; }

.name span { color: #b7410e; }

.masthead-nav a:hover { color: #ccc; }

.search-input { background-color: grey; padding: 10px 15px; font-size: 0.95em; border: none; margin-bottom: 15px; }

.search-button { background-color: grey; padding: 10px 15px; font-size: 0.95em; border: none; cursor: pointer; margin-left: -10px; /* Is there a better way of doing this? */ margin-right: 30px; margin-bottom: 15px; }

.search-button:hover { background: #ccc; }

How do I..... 1) Center the input box and icon on mobile devices? 2) Stop the icon from wrapping onto a new line, again as the viewport reduces?

Thanks in advance, Tim

Answer 1 · 2019-02-28T01:09:42Z

February 28, 2019 1:09am

<section class="masthead">
      <h1 class="name"><a href="#">Responsive<span>Website</span></a></h1>
      <ul class="masthead-nav">
        <li><a href="#">Account</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Logout</a></li>
        <li class="search-container">
          <form action="" class="search-form">
            <input class="search-input" type="text" placeholder="Search..." maxlength="50">
            <button class="search-button" type="submit">
              <i class="material-icons">search</i>
            </button>
          </form>
        </li>
      </ul>
    </section>

/* Remove default white space the browsers add */
      body {
        margin: 0;
        padding: 0;
      }

      /* Add padding around the whole masthead area */
      .masthead {
        padding: 15px;
      }

      /* Use flexbox to space and align the masthead and the nav */
      .masthead,
      .masthead-nav{ 
        background-color: #000000;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      /* Create vertical stacking on smaller screens */
      @media (max-width: 890px) {
          .masthead,
          .masthead-nav {
            flex-direction: column;
          }
        }

      /* Your previous styles */
      .name a, 
      .masthead-nav a { 
        font-size: .95em; 
        color: #ffffff; 
        text-transform: uppercase; 
        text-align: center; 
        display: block;
        text-decoration: none; 
      }

      /* Remove default padding that browsers add to <ul> elements */
      /* This makes the nav truly centered on smaller screens */
      .masthead-nav {
        padding-left: 0;
      }

      /* Your previous styles */
      .masthead-nav a { padding: 10px 15px; }
      .name span { color: #b7410e; }
      .masthead-nav a:hover { color: #ccc; }

      /* Create a flex parent to wrap the search input and submit button */
      /* No need to set justify-content or align items because */
      /* the default settings will work here */
      .search-form {
        display: flex;
        max-height: 30px;
      }
      .search-input { 
        background-color:white; 
        padding: 10px 15px; 
        font-size: 0.95em; 
        border: none; 
      }
      .search-button { 
        background-color: #b7410e; 
        font-size: 0.85em; 
        padding-top: 0.25em;
        border: none; 
        cursor: pointer; 
      }

      .search-button:hover { background: #ccc; }

Sidenote: For the search icon I used Google Material icons instead. Add the following in the head section:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Answer 2 · 2019-02-27T02:11:14Z

February 27, 2019 2:11am

Hi Tim,

Is there additional CSS you're using? When I copy and paste your HTML and CSS into an editor it doesn't seem to render as you're describing. And fyi, you can format your code for syntax highlighting and better readability by using the syntax of three back-ticks (the key above the tab key on the left side of the keyboard), the language you want to use (such as HTML or CSS, no quotes around that), pasting in your code, and three closing back-ticks, like so:

<p>I'm a paragraph.</p>

.some-class { background: blue; }

In the meantime I'll see if I can find a solution for you.

Answer 3 · 2019-02-28T10:06:01Z

February 28, 2019 10:06am

Thank you Nathan, that is really great and I appreciate your guidance in this matter. I'm still fairly new a this! Also good to know about how you can display the code. Thus far I've just been focused on following the videos. You were right, there was additional CSS, but you've covered that as well. Amazing. And sorry for the slight delay in getting back to you. Yesterday was full-on. I shall play later today! Many thanks again. Tim

Answer 4 · 2019-02-28T11:34:34Z

February 28, 2019 11:34am

Works like a dream!! Thank you again.

Answer 5 · 2019-02-28T13:26:26Z

February 28, 2019 1:26pm

Hi Nathan, I'm now trying to integrate your code into mine, which also uses CSS Grid. I'm trying to work it all through now, although currently it's all over the place. Give me a few hours, but I might need some additional help, if you don't mind? Tim

Answer 6 · 2019-02-28T19:06:41Z

February 28, 2019 7:06pm

State of play tonight. Much improved and very close I think. But unlike your example, the search items still are still not centered and the viewport narrows too much, leaving content "hidden" off-screen. I'm trying to build this using a "mobile-first" approach. I'm sure it's something really simply, but I can't see it. I've double checked you code and can't see any daft mistakes. I've tried to make sensible choices.

This is the HTML file

<!DOCTYPE html>
<html>
    <head>
        <title>Treehouse Webpage</title>
        <link href='https://fonts.googleapis.com/css?family=PT Sans' rel='stylesheet'>
        <link href="https://fonts.googleapis.com/css?family=Walter+Turncoat" rel="stylesheet"> 
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link href="css/grid.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
        <link href="css/media.css" rel="stylesheet">
    </head>

    <body>

        <div class="container">

            <header>

            <section class="masthead">
                <h1 class="name"><a href="#">Responsive<span>Website</span></a></h1>
                <ul class="masthead-nav">
                    <li><a href="#">Account</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Logout</a></li>
                    <li class="search-container">
                            <form action="" class="search-form">
                                <input class="search-input" type="text" placeholder="Search..." maxlength="50">
                                <button class="search-button" type="submit">
                                <i class="material-icons">search</i></button>
                            </form>
                    </li>
                </ul>
            </section>


            <section class="navigation-container">
                    <nav>
                        <ul class="main-nav">
                            <li><a href="">Home</a></li>
                            <li><a href="">About Us</a></li>
                            <li><a href="">Services</a></li>
                            <li><a href="">Products</a></li>
                            <li><a href="">Contact Us</a></li>
                        </ul>
                    </nav>
            </section>

            <section class="introduction-container">
                <h2 class="treehouse">Treehouse Rocks</h1>
            </section>

            </header>

            <main>Main</main>           
            <aside>Aside</aside>
            <footer>Footer</footer>
        </div>
    </body>

</html>

This is the main CSS file

* {
    box-sizing: border-box;
}

body {
    font-size: 1.4em;
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    color: #3a3a3a;
    padding: 0; /* Remove default white space the browsers add */
    margin: 0; /* Remove default white space the browsers add */
}

header {
    text-align: center;
}


main {
    background-color: #aad2ed;
}

aside {
    background-color: #6ad78a;
}

footer {
    background-color: #6e859c;
}

/* Remove default padding that browsers add to <ul> elements */
/* This makes the nav truly centered on smaller screens *//*
.masthead-nav {
    padding-left: 0;
}*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Add padding around the whole masthead area */
.masthead {
    padding: 15px;
    background-color: #000000;
}

/* Create a flex parent to wrap the search input and submit button */
/* No need to set justify-content or align items because */
/* the default settings will work here */
.search-form {
    display: flex;
    max-height: 30px;
}

.name a,
.masthead-nav a {
    font-size: .95em;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.name span {
    color: #b7410e;
}

.masthead-nav a:hover {
    color: #ccc;
}

.search-input { 
    background-color: white; 
    padding: 10px 15px; 
    font-size: 0.95em; 
    border: none; 
}

.search-button { 
    background-color: #b7410e; 
    font-size: 0.85em; 
    padding-top: 0.25em;
    border: none; 
    cursor: pointer; 
}

.search-button:hover {
    background: #ccc;
}

.navigation-container {
    background-color: grey;
    padding: 10px 15px;
}
.navigation-container li {
    padding: 10px 15px;

}

.navigation-container a {
    font-size: .95em;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
}

.main-nav a:hover {
    color: #b7410e;
}

.treehouse {
    color: #b7410e;
    font-family: "walter turncoat";
}
'''

This is the media queries file

'''
@media (min-width: 890px) {
    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto minmax(200px, 1fr) 100px;
        grid-gap: 10px;
        grid-template-areas:
            "header header"
            "main aside"
            "footer footer";
    }

    .masthead,
    .masthead-nav,
    .navigation-container,
    .main-nav   {
        display: flex;
    }

    .masthead,
    .navigation-container {
        flex-direction: column;
        align-items: center;
    }
}

@media (min-width: 1025px) {
    .masthead {
        flex-direction: row;
        justify-content: space-between;
    }

    .navigation-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: left;
    }
}
'''
This is the CSS grid file
'''
header {
    grid-area: header;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

.container {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(auto, auto);
        grid-gap: 10px;
        grid-template-areas:
            "header"
            "main" 
            "aside"
            "footer";
}

Again, any thoughts really appreciated. Tim

Answer 7 · 2019-03-05T22:40:11Z

March 5, 2019 10:40pm

Hi Tim,

In main.css try adding the rule justify-content: center; to the .search-form class. That centered the search bar/form for me.

Answer 8 · 2019-03-06T16:19:20Z

March 6, 2019 4:19pm

Ha ha. Think I'm best to go and lie down in a dark room for a bit!!

Just a few more things to tidy up and then I can progress to the main body!!

Many thanks Nathan. Very much appreciated.

Welcome to the Treehouse Community

Looking to learn something new?

Tim Abbott

Tim Abbott

How do you add a search input box and icon to a navigation menu?

8 Answers

Nathan Magyar

Nathan Magyar

Nathan Magyar

Nathan Magyar

Tim Abbott

Tim Abbott

Tim Abbott

Tim Abbott

Nathan Magyar

Nathan Magyar

Tim Abbott

Tim Abbott

Tim Abbott

Tim Abbott

Nathan Magyar

Nathan Magyar

Tim Abbott

Tim Abbott

Nathan Magyar

Nathan Magyar