Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialThania Abrahams
972 PointsHow do I create a search box that is responsive if I want to place it at the top right corner of my website?
Hi there
I want to be able to create a simple search box that sits on the top right corner of my website but I also want it to be responsive, how would I code this?
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: Changa One, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
2 Answers
Chase Lester
10,972 PointsThat site you gave is pretty straight forward with a tutorial on getting that effect. Here is a code pen I put together from that web page with example a. If you are wanting example b, and are having a hard time putting together the code, I can assist a bit more.
http://codepen.io/anon/pen/rOLrXm
Basically you have your css defining your input box, then when a user clicks into it, the css defines a transition between the first state and the active state of the css, which expands the box.
If you want to get this into the top right of your web page, you can use absolute positioning to do so.
Alen Subasic
12,279 PointsCould you also include your HTML? I see the CSS but we would need the HTML to fully understand where you are coming from.
Thania Abrahams
972 PointsThank you so much for responding! I wanted to create something like the example shown here: http://webdesignerwall.com/tutorials/expandable-mobile-search-form but I do not understand the code at all. I did, however, google know like basic sytax for forms: <form action=""> <input type="text" name="search" placeholder="search here..."> <input type="submit" value="search/"> </form>
Chase Lester
10,972 PointsChase Lester
10,972 PointsDo you have an example from another site you are wanting to replicate, or have something similar?