Automatic menu break with icon and text aligned

Asked

Viewed 697 times

0

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

.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’d like you to have the automatic break: inserir a descrição da imagem aqui

css html5 css3 sass

  • why not use the @media ?

  • is that in the project I use 4 resolutions for fixed media where I extend from a base file to all others and having the resolutions on the predefined media is 1020px, 800px, 520px, 380px and the break is taking place before the 1020px

  • only with CSS I believe you will not succeed. I think you will have to use JS, you can use?

  • can I @Moisesgama

  • I forgot to ask you do you have JQuery in the project? Or will it be JS even?

  • @Moisesgama I do have

Show 1 more comment

2 answers

1


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

You don’t necessarily need to follow these standard measures @media-queries that you mentioned in your comment in your question, you can simply create a new @media-query 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 output window so you can see this in action.
For your project, just modify the resolution of the @media-query from the above code for 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’s a example in Jsfiddle of this second option.

0

I got the image effect by changing only one CSS rule (include here only what I 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>

Browser other questions tagged css html5 css3 sass

You are not signed in. Login or sign up in order to post.