Increased size

HTML & CSS
1

I try to increase size of cross icon. It is nice example.

How to increase cross icon as it will be corrupted when I test.

Search toggle 13px will not work.
height: 13px;
width: 13px;

.search-toggle {
  position: relative;
  display: block;
  height: 10px;
  width: 10px;
/*
 height: 13px;
 width: 13px;
*/
}
.search-toggle::after {
  height: 2px;
  width: 7px;
  background: #0097bf;
  top: 10px;
  left: 8px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.search-toggle.active::after {
  width: 12px;
  left: -1px;
  top: 4px;
}

Header search demo.

2

It would be helpful to see the code for the icon in question. :winky:

coothead

1 Like
3

Did you mean the search icon on this page ?

If so then when you increase the height and width of the search-toggle you also need to change the :after element that goes with it as that is the tail of the search icon.

Here I changed search-toggle to 15px height and width and then just tweaked some settings on the after:element…

.search-toggle {
	position: relative;
	display: block;
	height: 15px;
	width: 15px;

...

	&::after {
		height: 2px;
		width: 9px;
		background: $blue;
		top: 15px;
		left: 12px;
		transform: rotate(45deg);
	}

The :after element is just placed into position so you can just tweak in the devtool window until its correct.

4

Thank you for the hint! I have fixed an issue.
Is there any tool to design CSS and After settings as it is hard to manipulate CSS and perform from the start?

5

Not that I know of apart from the developer tools which are the best tools out there.

I just fiddled with the dimensions in the devtools window and you can just increase and decrease with the arrow keys util things look like you want.

1 Like
7

Thank you for all support.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.