Sticky Search Bar - DarkSoul CodePen

Procedure

Step 1 - Basic HTML Structure: Set up the HTML with a div for the search bar, a search icon, and an input field. Include navigation and content sections for context.

Step 2 - Add Google Fonts: Import the 'Belanosima' and 'Rubik Vinyl' fonts from Google Fonts.

Step 3 - Style the Body: Use CSS to set height to 200vh for scrolling, set a background-color, and apply a font-family.

Step 4 - Create the Sticky Search Bar: Style the .darksoul-search-bar with width, height, background-color, border-radius, and box-shadow. Use position: fixed to keep it at the top center of the viewport and transition for smooth width change.

Step 5 - Style the Search Icon: Center the search icon within the bar using margin properties.

Step 6 - Add Hover Effect to Expand the Search Bar: Implement a :hover state to increase the width and adjust the border-radius.

Step 7 - Style the Search Input: Initially hide the input field with display: none. On hover, change display to inline-flex and set width and height.

Step 8 - Handle Small Screens: Use a media query (@media only screen and (max-width: 600px)) to adjust the search bar's width and border-radius.

By following these steps, you'll create an interactive and responsive sticky search bar that enhances user experience on your web page.

Html

Css

@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;
    }
    .darksoul-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
    {
        margin-bottom: auto;
        margin-top: auto;
        margin-left: 5px;
        margin-right: auto;
        border-radius: 50%;
    }
    .darksoul-search-bar:hover
    {
        width: 400px;
        border-radius:  0% 30px 30px 30px;
    }
    .darksoul-search-input
    {
        margin: auto;
        display: none;
        transition: display 12s;
        outline: none;
        border: none;
        font-family: 'Belanosima', sans-serif;
        border-radius: 25px;
        padding-left: 10px;
    }
    .darksoul-search-bar:hover .darksoul-search-input
    {
        display: inline-flex;
        width: 78%;
        height: 70%;
    }
    input[type="submit"]
    {
        display: none;
    }
    @media only screen and (max-width: 600px) 
    {
        .darksoul-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: #E9F1FF;
        color: #000000;
    }

Sticky Search Bar CodePen

CodePen

Procedure

Html

Css

Js

Output Screenshot