Menu wrap with icon and text aligned

Navigation
0

I'm making a menu with ul and li where within my li it has an a with a span for the icon and a span for the text of the menu item. Currently when he arrives at an xxx resolution he breaks the items. I would like when the break happens, the icon would stay on top of the word instead of what is currently happening next to it but this without using a @media (max-width: 1100px) . Below the menu source is an image of how I wanted it to be when it was broken. 

.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>

How I wish it to be wrapped:

    
asked by anonymous 03.12.2015 / 12:39

2 answers

1

The best way to do this is to use @media-queries .

You do not necessarily need to follow these standard measures of the @media-queries that you mention in your comment in your question, you can simply create a new @media-query for that responsible for this modification: 

@media screen and (max-width: 768px) {
span.menu-icon {
    margin: 0 auto;
    display: block !important;
}
span.menu-text {
    display: block !important;
}
}

Here's a example in JSFiddle . Drag the result window so you can see it in action.
For your project, simply modify the @media-query resolution of the above code to the resolution you want this modification to occur.

2nd Option - Using jQuery 

$(window).resize(function() {
  width = $(window).width();
  if( width < 768 ) {
    $('.menu-icon ').addClass('smallRes-menu-icon');
    $('.menu-text ').addClass('smallRes-menu-text');
  } else {
    $('.menu-icon ').removeClass('smallRes-menu-icon');
    $('.menu-text ').removeClass('smallRes-menu-text');
  }
});

.smallRes-menu-icon {
    margin: 0 auto;
    display: block !important;
}
.smallRes-menu-text {
    display: block !important;
}

Here you have a example in JSFiddle for this second option.

    
03.12.2015 / 15:22
0

I got the effect of the image by changing only one CSS rule (here only includes what I have modified): 

#nav-root > li > a .menu-icon {
  display: block;
  margin: auto;
}


.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: block;
  margin: auto;
  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>
    
03.12.2015 / 14:56
Error org.hibernate.LazyInitializationException VB.Net - Null Import for System.Byte