Home › Forums › Basel support forum › Search Bar Style

Search Bar Style

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 14, 2021 at 8:22 am #258301

    dreamlenses.ae
    Participant

    is it possible to change the layout of the search icon into a search bar with a placeholder as attached?

    Attachments:
    You must be logged in to view attached files.
    January 14, 2021 at 4:34 pm #258460

    Elise Noromit
    Member

    Hello,

    It seems we could do that with custom CSS, the only thing is I am not sure there would be space enough for the text in the header, please provide your site admin access I will check.

    Best Regards

    January 17, 2021 at 7:19 am #259093

    dreamlenses.ae
    Participant

    here u go

    January 17, 2021 at 9:39 am #259104

    Elise Noromit
    Member

    Hello,

    Please provide your site login URL.

    Best Regards

    January 17, 2021 at 10:44 am #259106

    dreamlenses.ae
    Participant

    sure

    January 18, 2021 at 8:55 am #259275

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .basel-search-dropdown {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.basel-search-dropdown > a:hover {
	text-decoration: none;
}
.basel-search-dropdown > a > i {
	display: flex;
	align-items: center;
}
.basel-search-dropdown > a > i:after {
	content:"Search Dream Lenses";
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 12px;
}

    Best Regards

    January 19, 2021 at 7:08 am #259588

    dreamlenses.ae
    Participant

    Yay! Thank you. It works.

    January 19, 2021 at 7:15 am #259591

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Search Bar Style’ is closed to new replies.