I have a website (structureonline.com) responsive and when I access the menu on a PC simulating a mobile device the text is aligned to left .
I have the following code on my site:
index.html
:
<nav>
<ul class="sf-menu">
<li><a href="#lk1">A gente!</a>
<ul>
<li><a href="#">Como foi?</a></li>
<li><a href="#">O que falam?</a>
<ul>
<li><a href="#">Dos projetos</a></li>
<li><a href="#">Da EstruturaOnline</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#lk2">WWW o quê?</a></li>
<li><a href="#lk3">Vocês</a></li>
<li><a href="#lk4">Fizemos</a></li>
<li><a href="#lk5">Fazemos</a></li>
<li><a href="#lk6">Fale</a></li>
</ul>
</nav>
CSS:
.select-menu{
background: #292929;
background: url(../images/all/select_165x60.png) no-repeat scroll 100% center;
background-position: 100% center;
border: 0px !important;
color: #EEEEEE;
font: 900 13px "Architects Daughter";
height: 60px;
text-align: center !important;
text-overflow: "";
width: 100%;
-moz-appearance: none;
-webkit-appearance: none;
}
jQuery:
(function(a){a.fn.mobileMenu=function(d){var c={defaultText:"Menu",className:"select-menu",subMenuClass:"sub-menu",subMenuDash:"–"},b=a.extend(c,d),e=a(this);this.each(function(){var g=a(this),f;g.find("ul").addClass(b.subMenuClass);var f=a("<select />",{"class":b.className+" "+e.get(0).className}).insertAfter(g);a("<option />",{value:"#",text:b.defaultText}).appendTo(f);g.find("a").each(function(){var h=a(this),j=" "+h.text(),l=h.parents("."+b.subMenuClass),i=l.length,k;if(h.parents("ul").hasClass(b.subMenuClass)){k=Array(i+1).join(b.subMenuDash);j=k+j}a("<option />",{value:this.href,html:j,selected:(this.href==window.location.href)}).appendTo(f)});f.change(function(){var h=a(this).val();if(h!=="#"){window.location.href=a(this).val()}});a(".select-menu").show()});return this}})(jQuery);$(document).ready(function(){$(".sf-menu").mobileMenu()});