Menu icon in mobile

BGASESORES · September 2016

I have icons in menu creative similar to demo http://themes.muffingroup.com/be/book/

but in mobile this icons havent padding.

thanks

Albert · September 2016

Hi,

on http://themes.muffingroup.com/be/book/ we used the icons, not background images for the menu items like you did and that's why it looks different. We have 2 solutions for this case:

1. You can move menu items to the right side on mobile:

@media only screen and (max-width: 767px) {
    #Top_bar #menu ul li a span { padding-left: 50px !important; }
}

2. Or, you can remove menu item backgrounds on mobile:

@media only screen and (max-width: 767px) {
    #Top_bar .menu > li > a span:not(.description) { display: none !important; }
}

BGASESORES · September 2016

fisrt option no work, can you review css code. Thnaks

Albert · September 2016

We did checked it before. However, we checked once again and it works what you can see on http://pasteboard.co/3kzx7TPIo.png

BGASESORES · September 2016

my css code is

h2 { font-weight: 400; letter-spacing: 2px; }

h3 { font-weight: 400; letter-spacing: 3px; }

h4 { font-weight: 400; letter-spacing: 2px; }

h5 { font-weight: 400; letter-spacing: 4px; }

h6 { font-weight: 400; }

blockquote { font-size: 20px; line-height: 30px; }

/* Gallery */

.if-overlay .image_frame:not(.no_link) .image_wrapper img:not(.ls-l) { margin-bottom: 0 !important; }

/* Footer */

#Footer .footer_copy { border-top: 1px solid rgba(0, 0, 0, 0.1); }

#Top_bar .menu > li#menu-item-104 > a span:not(.description) { background: url(http://orienta-m.com/wp-content/uploads/2016/09/familias.png) no-repeat 10px center;}

#Top_bar .menu > li#menu-item-118 > a span:not(.description) { background: url(http://orienta-m.com/wp-content/uploads/2016/09/centros-educativos.png) no-repeat 10px center; }

#Top_bar .menu > li#menu-item-119 > a span:not(.description) { background: url(http://orienta-m.com/wp-content/uploads/2016/09/empresas.png) no-repeat 10px center; }

.my-class-big-font { font-size:400% !important; font-weight:bold; } - See more at: http://themes.muffingroup.com/be/theme/shortcodes/typography/#sthash.G8Kqznx9.dpuf

I copy and paste your first code but this code not change the menu.

Thanks

Albert · September 2016

Paste the css we gave you above on 1st position then and check.

BGASESORES · September 2016

it is work if I cpy paste your code in first line.

thank you. do you close this ticket?

Albert · September 2016

It simply means that you have a bugs in your css section and that's why the code we provided doesn't work from the last position. Topic was closed as you requested.

Menu icon in mobile

Comments