search icon in header on service portal.

[DhanashreeL]

I want to add and expand search icon in header on service portal.

[Anand Kumar P]

Hi @DhanashreeL ,

In sp_widget  table open the widget name Typeahead Search the search icon is in and modify the CSS.

.search-bar {
    position: relative; 
}
.search-bar .ta-icon {
    width: 20px; //Adjust the icon width as needed 
    height: 20px; //Adjust the icon height as needed 
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    line-height: 20px;
    vertical-align: bottom;
    margin-right: 8px; /* Space between icon and input
    cursor: pointer; /* Add a pointer cursor for interaction 
    transition: width 0.3s ease; }

.search-bar input[name="q"]:focus + .ta-icon {
    width: 40px; 
}

Please mark it as helpful and solution proposed if it works for you.

Thanks,

Anand

[DhanashreeL]

Hi, Anand 

thanks for replying but I have tried and only CSS code is not working, could you please provide HTML and JS code as well.

[Anand Kumar P]

Hi @DhanashreeL ,

Try below script HTML,

<div class="header">
    <div class="search-bar">
        <input type="text" name="q" placeholder="Search..." />
        <i class="ta-icon"></i>
    </div>
</div>

CSS

.header .search-bar {
    position: relative; 
}

.header .search-bar .ta-icon {
    width: 20px; /* Adjust the icon width as needed 
    height: 20px; /* Adjust the icon height as needed 
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    line-height: 20px;
    vertical-align: bottom;
    margin-right: 8px; /* Space between icon and input 
    cursor: pointer; /* Add a pointer cursor for interaction 
}

/* Styles for expanding the search bar on icon click 
.header .search-bar.expanded {
    max-width: 200px; /* Adjust the maximum width as needed 
}

 Javascript:

document.addEventListener('DOMContentLoaded', function() {
    var searchIcon = document.querySelector('.ta-icon');
    var searchBar = document.querySelector('.search-bar');
    searchIcon.addEventListener('click', function() {
        searchBar.classList.toggle('expanded');
    });
});

Thanks,

Anand

[DhanashreeL]

Thanks, Anand