Replace Icon with the text “Search”

Hello Edvin,

Expanding on that, maybe you can add the following:

.dgwt-wcas-ico-magnifier-handler {
	display: none;
}

.dgwt-wcas-search-wrapp {
	padding-top: 33px;
}

Best regards,
Clint

Thank you so much!

One problem. On the mobile I have another menu applied. I need to apply the same style to that one, but I cant find how to target it on the mobile with CSS.

https://ibb.co/svqV560

Can you help me to elaborate on that one as well?

Hello Edvin,

You can set the search menu item to display as “Search icon”. Then, we can try applying the same CSS code for the mobile view.

Best regards,
Clint

Thank you for the quick answer!

That worked, now I have the search text there. Now I you just need to help me set the right position of it for mobile view.
https://ibb.co/gjF5MMs

One other thing. When you click the search icon this shows.
https://ibb.co/PcS2D6C
It works fine, but it seems a little bit misplaced. The search bar keeps going outside of the screen. How do I fix that on just the mobile view?

Sincerely,
Edvin

Hello Edvin,

Can you try the following:

@media only screen and (max-width: 992px) {
    .dgwt-wcas-search-wrapp {
	    padding: 8px 0 8px 10px !important;
	    text-indent: 20px;
	    border-bottom: 1px solid rgba(0, 0, 0, 0.03)
    }
    
    .dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-form {
	    position: relative;
	    left: -10px;
	    top: -8px;
	    width: 101%;
    }
}

@media only screen and (max-width: 600px) {
    .dgwt-wcas-search-wrapp {
	    text-indent: 5px;
    }
    
    .dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-form {
    	width: 105%;
    }
}

Best regards,
Clint

You’re awesome Clint! Appreciate the help. Solved everything.

Have a wonderful day ?