[Sakin]

@Nancy: Can you try the following then.

#sidebar-header-right  .widget_catchevolution_social_search_widget #social-search #s {
    display: block;
    width: 1px;
}

[Nancy]

That gets the icons close together, but the search box doesn’t expand correctly when you click on it. It’s slightly bigger than the icon. Same behavior on Android and PC.

[Sakin]

@Nancy: First try the following css.

#sidebar-header-right  .widget_catchevolution_social_search_widget #social-search #s {
    display: block;
}

If it doesn’t work then remove it and add the following

#sidebar-header-right  .widget_catchevolution_social_search_widget #social-search #s {
    display: block;
    width: 0;
}
#sidebar-header-right  .widget_catchevolution_social_search_widget #social-search #s:focus {
	width: 196px;
}

[Nancy]

Neither worked.

[Sakin]

@Nancy: What happens when you add the second one.

#sidebar-header-right  .widget_catchevolution_social_search_widget #social-search #s {
    display: block;
    width: 1px;
}
#sidebar-header-right  .widget_catchevolution_social_search_widget #social-search #s:focus {
	width: 196px;
}

[Nancy]

The CSS above with the change of the width to 1 px seems to do the trick. The buttons are in the correct spot and the box appears. The only minor thing is the default search text doesn’t appear, but I can live with that. (I still see the “s” from search on the search icon, but it’s really subtle and I don’t think most people will notice it.

[Author]

Posts