Implemented solution [15.05.2024]
I have added a new menu item before CTAs so I do not need to clone a module and code the feature. Then I downloaded a search icon and styled it as the Fueld coloring. Then added the image as the menu item in the nav bar. The code is as below;
<span a title="Zoeken" href="/hs-search-results"><span><img style="border-style: none; display: block; margin-left: auto; margin-right: 8px;" src="https://fueld.nl/hubfs/zoeken.webp" alt="Fueld zoeken" width="25" height="auto" /></span></a>
The result is as below
![](https://miladnaderzad.com/wiki/wp-content/uploads/2024/05/Fueld-website-nav-bar-search-icon-1024x62.webp.pagespeed.ce.jlAMk1OkwN.webp)
Main challenge
I have been assigned a challenge to add a search feture to the Fueld website built with HubSpot CMS. The obstacles are that
1- If I want to edit the header, I need to clone it to the child theme and try to add the search feture
2- The heading size is not accepting the search box so I have to add a magnifier as icon
Solution 1:
Clone the search module to the child theme, update the nav bar and add a search icon as a link to go to the search page. I will update this post if this solution works.