css - Is there a way to make the 'hamburger menu' lines in Foundation 5 thicker? -
Actually, the hamburger lines (horizontal white lines) are a bit lean :) I wonder if they have any way ?
My HTML:
& lt; Nav class = "tab-hide hide-to-medium" & gt; & Lt; Section class = "left-small" & gt; & Lt; One square = "left-canvas-toggle menu-icon" & gt; & Lt; Period & gt; & Lt; / Span & gt; & Lt; / A & gt; & Lt; / Section & gt; & Lt; / Neo & gt;
CSS:
. Menuu-icon: after {box-shadow: 0px 2px 0px white, 0px 2px 0px white, 0px 2px 0px white; }
I went to the inspector and tried to change the CSS on the fly, but nothing went unnoticed ... though these qualities were ...
.tab-bar Menuu-icon {text-indent: 2.1875rem; Width: 2.8125rem; Height: 2.8125rem; Display area; Padding: 0; White color; Status: Relative; Webkit-Conversions: Translation 3D (0, 0, 0); Conversion: Translation 3D (0, 0, 0); }
Small lines are controlled by the .tab-bar .menu Is -con span:
after pseudo-element
If you want to make it thick, you can increase the "height" of the pseudo-element. But then you have to adjust the margin-top
property and the position of the three box shadow (which is used to generate the foundation white horizontal lines) to compensate for the extra height.
Then will work to change these qualities and make the same everything a little bit except for all the rest. If you do spies, then be sure to adjust them just play with height, shadow positions and margin-top until you get it.
Example:
CSS
.tab-bar Menuu-icon span: after {height: 0.1rem; Margin-top: -0.3rem; Box-shadow: 0 -3px 0px 1px white, 0 4px 0 1px white, 0 11px 0 1px white; } .tab-bar Menuu-icon span: hover: after {box-shadow: 0 -3px 0 1px # b3b3b3, 0 4px 0 1px # b3b3b3, 0 11px 0 1px # b3b3b3; }
Comments
Post a Comment