css - responsive menu toogle button align -


this menu toogle section:

jsfiddle

jsfiddle link or external html

menu this

original

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 )

left right center

html:

<div class="navigation">     <div id="slidebox">                  <div id="toggle">                     <a href="#">&#9776;</a>                     <a class="top" href="#slidebox">&#9776;</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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -