Estou fazendo um menu com ul
e li
onde dentro das minhas li
tem um a com um span
para o ícone e um span
para o texto do item do menu. Atualmente quando ele chega em uma resolução xxx ele quebra os itens. Eu gostaria que quando fosse acontecer a quebra, o ícone ficasse em cima da palavra ao invés do que acontece atualmente que é ao lado mas isso sem usar um @media (max-width: 1100px)
. Abaixo o fonte do menu e uma imagem de como eu queria que ficasse quando houvesse a quebra.
.container {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
#nav-root {
position: relative;
top: 1px;
}
#nav-root > li {
display: table;
float: left;
font-size: 1.1em;
white-space: nowrap;
position: relative;
border-left: 1px solid #e2e7eb;
}
#nav-root > li:last-child {
border-right: 1px solid #e2e7eb;
}
#nav-root > li > a {
display: table-cell;
color: #585858;
text-decoration: none;
text-align: center;
padding: 20px 16px;
text-transform: uppercase;
font-weight: bold;
/*&.menu-link-1350 .menu-icon {*/
}
#nav-root > li > a:hover {
padding-bottom: 18px;
background-color: #f1f5f8;
color: #e23d80;
border-bottom: 2px solid #e23d80;
}
#nav-root > li > a .menu-icon {
width: 27px;
height: 18px;
display: table-cell;
vertical-align: middle;
}
#nav-root > li > a .menu-text {
vertical-align: middle;
display: table-cell;
}
#nav-root > li > a.menu-link-803 .menu-icon {
background: url("http://i.imgur.com/KSiKHuq.png") center top no-repeat;
}
#nav-root > li > a.menu-link-804 .menu-icon {
background: url("http://i.imgur.com/KSiKHuq.png") center top no-repeat;
}
#nav-root > li > a.menu-link-805 .menu-icon {
background: url("http://i.imgur.com/dGZs3ZN.png") center top no-repeat;
}
#nav-root > li > a.menu-link-1185 .menu-icon {
background: url("http://i.imgur.com/Gof729V.png") center top no-repeat;
}
#nav-root > li > a.menu-link-1344 .menu-icon {
background: url("http://i.imgur.com/wvKgGhL.png") center top no-repeat;
}
#nav-root > li > a.menu-link-1345 .menu-icon {
background: url("http://i.imgur.com/dGZs3ZN.png") center top no-repeat;
}
#nav-root > li > a.menu-link-806 .menu-icon {
background: url("http://i.imgur.com/CpJVydF.png") center top no-repeat;
}
#nav-root > li ul {
display: none;
}
<ul id="nav-root">
<li class="menu-list-804">
<meta itemprop="name" content="Smartphones">
<a class="menu-link-804" href="" itemprop="url" title="Smartphones">
<span class="menu-icon"></span>
<span class="menu-text" itemprop="name">Smartphones</span>
</a>
</li>
<li class="menu-list-803">
<meta itemprop="name" content="Celulares">
<a class="menu-link-803" href="" itemprop="url" title="Celulares">
<span class="menu-icon"></span>
<span class="menu-text" itemprop="name">Celulares</span>
</a>
</li>
<li class="menu-list-1185">
<meta itemprop="name" content="Telefonia">
<a class="menu-link-1185" href="" itemprop="url" title="Telefonia">
<span class="menu-icon"></span>
<span class="menu-text" itemprop="name">Telefonia</span>
</a>
</li>
<li class="menu-list-805">
<meta itemprop="name" content="Smart Gadgets">
<a class="menu-link-805" href="" itemprop="url" title="Smart Gadgets">
<span class="menu-icon"></span>
<span class="menu-text" itemprop="name">Smart Gadgets</span>
</a>
</li>
<li class="menu-list-1344">
<meta itemprop="name" content="Informática">
<a class="menu-link-1344" href="" itemprop="url" title="Informática">
<span class="menu-icon"></span>
<span class="menu-text" itemprop="name">Informática</span>
</a>
</li>
<li class="menu-list-1345">
<meta itemprop="name" content="Hardware">
<a class="menu-link-1345" href="" itemprop="url" title="Hardware">
<span class="menu-icon"></span>
<span class="menu-text" itemprop="name">Hardware</span>
</a>
</li>
<li class="menu-list-806">
<meta itemprop="name" content="Acessórios">
<a class="menu-link-806" href="" itemprop="url" title="Acessórios">
<span class="menu-icon"></span>
<span class="menu-text" itemprop="name">Acessórios</span>
</a>
</li>
</ul>
@media
? – MoisesGama 3/12/15 às 11:54CSS
acredito que você não vai conseguir. Acho que você terá que usarJS
, você pode usar? – MoisesGama 3/12/15 às 12:00JQuery
no projeto? Ou seráJS
puro mesmo? – MoisesGama 3/12/15 às 13:23