css - responsive menu toogle button align -
this menu toogle section:
jsfiddle
jsfiddle link or external html
menu this
question:
what change make toggle button (menu icon) align in <div class="navigation"></div>
container ? css only
for better imagination here align text ( left, right, center )
html:
<div class="navigation"> <div id="slidebox"> <div id="toggle"> <a href="#">☰</a> <a class="top" href="#slidebox">☰</a> </div> <ul id="box" class="menu"> <li><a href="#">homepage</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact us</a></li> </ul> </div> </div>
css:
/* toggle */ #slidebox { position: relative; padding: 0; margin: 0; display: block; width: 100%; } #toggle { height: 50px; padding: 0; position: relative; background: #0292a8; display: none; text-align: center; } @media screen , (max-width: 640px) { #toggle { display: block; } } #toggle { position: absolute; text-decoration: none; line-height: 50px; font-size: 16px; color: #fff; } #box { padding: 0; margin: 0; position: relative; width: 100%; display: block; } @media screen , (max-width: 640px) { #box { display: none; } } #slidebox:target #box { min-height: 100%; display: block; opacity: 1; } #slidebox:target .top { pointer-events: none; display: none; }
i did not question properly. want float left or right. based on image provided, :
#toggle { margin-left: auto; margin-right: 0; width: 50%; }
give width,which like.
Comments
Post a Comment