Skip to content

Instantly share code, notes, and snippets.

@Maskedlll
Created February 7, 2025 05:06
Show Gist options
  • Save Maskedlll/6760a32165600e46a504f2c5e0b8a9cd to your computer and use it in GitHub Desktop.
Save Maskedlll/6760a32165600e46a504f2c5e0b8a9cd to your computer and use it in GitHub Desktop.
Sticky Search Bar
<div class="spectacledcoder-search-bar">
<img class="search-icon" width="30" height="30" src="https://img.icons8.com/sf-black/500/000000/search.png" alt="search"/>
<input type="text" name="search" placeholder="Search SpectacledCoder or type a URL" class="spectacledcoder-search-input" autocomplete="on"/>
</div>
<div class="nav">
<p>Scroll down and Hover over the Search icon.</p>
</div>
<div class="content">
</div>
<div class="content">
</div>
<p class="disclaimer">Designed & Created by <b>SpectacledCoder</b> | Icons by <a href="https://icons8.com/" target="_blank">Icons8</a></p>

Sticky Search Bar

Implement a sticky search bar with CSS hover and transition effects for enhanced user interaction. The design utilizes CSS transitions to smoothly transform the bar on hover, providing a visually appealing and modern experience. Employing position: sticky in CSS ensures the bar remains fixed during scrolling, enhancing site navigation and user engagement.

A Pen by SpectacledCoder on CodePen.

License.

@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
body
{
margin: 0;
width: 100%;
height: 200vh;
display: flex;
flex-direction: column;
background-color: #E9F1FF;
overflow-y: scroll;
font-family: 'Belanosima', sans-serif;
}
.spectacledcoder-search-bar
{
width: 60px;
height: 60px;
margin: auto;
background-color: white;
display: flex;
border-radius: 0% 30px 30px 30px;
transition: width 1s;
box-shadow: 5px 5px 20px #d8e6fd, -5px -5px 30px white;
position: fixed;
top: 102px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.search-icon
{
padding: 5px;
margin-bottom: auto;
margin-top: auto;
margin-left: 10px;
margin-right: auto;
border-radius: 50%;
background-color: #E9F1FF;
}
.spectacledcoder-search-bar:hover
{
width: 400px;
border-radius: 0% 30px 30px 30px;
}
.spectacledcoder-search-input
{
margin: auto;
display: none;
transition: display 12s;
outline: none;
border: none;
font-family: 'Belanosima', sans-serif;
border-radius: 25px;
padding-left: 10px;
}
.spectacledcoder-search-bar:hover .spectacledcoder-search-input
{
display: inline-flex;
width: 78%;
height: 70%;
}
input[type="submit"]
{
display: none;
}
@media only screen and (max-width: 600px)
{
.spectacledcoder-search-bar:hover
{
width: 80%;
border-radius: 0% 30px 30px 15px;
}
}
.nav
{
width: 80%;
height: 60px;
margin: auto;
background-color: white;
display: flex;
border-radius: 15px;
box-shadow: 5px 5px 20px #d8e6fd, -5px -5px 30px white;
margin-bottom: 50px;
margin-top: 250px;
}
.content
{
width: 80%;
height: 400px;
margin: auto;
background-color: white;
display: flex;
border-radius: 15px;
box-shadow: 5px 5px 20px #d8e6fd, -5px -5px 30px white;
margin-bottom: 50px;
margin-top: 50px;
}
/* width */
::-webkit-scrollbar
{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track
{
background-color: rgba(226, 247, 255, 0);
}
/* Handle */
::-webkit-scrollbar-thumb
{
background: #99beff;
border-radius: 10px;
height: 10px;
width: 3px;
}
.nav p
{
margin: auto;
color: #303030;
}
.disclaimer
{
margin: auto;
width: fit-content;
color: rgb(0, 0, 0);
}
.disclaimer a
{
text-decoration: none;
color: #6fa4ff;
}
.disclaimer a:hover
{
color: #4a8cff;
}
::selection
{
background-color: #ffffff00;
color: #ffffff00;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment