Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 3, 2020 at 1:38 pm #1169292
    Yossi Yerushalmi

    I can’t sort the icons at the top of the site
    I have a code for desktop mode and I don’t know how to set the order of icons for mobile

    דף הבית

    The order of icons for desktop is good I don’t want to change it

    This is the code I currently have

    #top #wrap_all #socket .social_bookmarks {
    float: none;
    margin: 0;
    text-align: center;
    }
    #top #wrap_all #socket .social_bookmarks li {
    float: none;
    display: inline-block;
    }
    #socket .social_bookmarks li a {
    width: 50px!important;
    line-height: 50px!important;
    min-height: 50px!important;
    font-size: 20px;
    }
    #socket .social_bookmarks li {
    height: 50px!important;
    width: 50px!important;
    }
    #socket .social_bookmarks {
    height: 60px!important;
    }
    #socket span.copyright {
    font-size: 15px !important;
    text-align: center;
    width: 100%;
    }
    .html_bottom_nav_header.html_cart_at_menu #top .av-logo-container .social_bookmarks {
    left: auto;
    right: 0;
    }
    .html_cart_at_menu.html_bottom_nav_header #menu-item-shop {
    float: none;
    right: 0;
    }
    #menu-item-shop .dropdown_widget {
    right: auto !important;
    top: 91px;
    left: 0 !important;
    }

    Thank you
    Yossi

    January 4, 2020 at 4:52 am #1170172
    Rikard

    Hey Yossi,

    Thanks for the link, I’m not sure exactly what you are looking to change on mobile though. Could you try to explain your intentions a bit further please?

    Best regards,
    Rikard

    January 4, 2020 at 1:03 pm #1170222
    Yossi Yerushalmi

    hey Rikard
    On the mobile the 4 icons: shop, logo, search and burger menu

    Thank you
    Yossi

    January 4, 2020 at 7:30 pm #1170328
    Victoria

    Hi Yossi Yerushalmi,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    January 4, 2020 at 9:55 pm #1170366
    Yossi Yerushalmi

    Hi Victoria

    This is what I want only for the mobile
    </a

    Thank you
    Yossi

    January 5, 2020 at 6:59 pm #1170486
    Victoria

    Hi Yossi Yerushalmi ,

    First of all, you need to wrap the code above in the media query so that it does not affect the mobile or tablet screens. Please put it between:

    
@media only screen and (min-width:1024px){

}

    Best regards,
    Victoria

    January 5, 2020 at 10:23 pm #1170575
    Yossi Yerushalmi

    OK
    I did it

    @media only screen and (min-width:1024px){
    #top #wrap_all #socket .social_bookmarks {
    float: none;
    margin: 0;
    text-align: center;
    }
    #top #wrap_all #socket .social_bookmarks li {
    float: none;
    display: inline-block;
    }
    #socket .social_bookmarks li a {
    width: 50px!important;
    line-height: 50px!important;
    min-height: 50px!important;
    font-size: 20px;
    }
    #socket .social_bookmarks li {
    height: 50px!important;
    width: 50px!important;
    }
    #socket .social_bookmarks {
    height: 60px!important;
    }
    #socket span.copyright {
    font-size: 15px !important;
    text-align: center;
    width: 100%;
    }
    .html_bottom_nav_header.html_cart_at_menu #top .av-logo-container .social_bookmarks {
    left: auto;
    right: 0;
    }
    .html_cart_at_menu.html_bottom_nav_header #menu-item-shop {
    float: none;
    right: 0;
    }
    #menu-item-shop .dropdown_widget {
    right: auto !important;
    top: 91px;
    left: 0 !important;
    }
    }

    January 7, 2020 at 2:16 pm #1171053
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
.responsive #top .logo {
    float: none !important; 
    margin: auto !important; 
}
.responsive .logo img {
    margin: auto;
}
.responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
    left: 0 !important; 
}
.responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    right: 0px !important; 
    float: right !important; 
    width: 50% !important; 
}
.rtl .avia-menu.av_menu_icon_beside {
    margin-right: 0 !important; 
    padding-right: 0 !important; 
}
.responsive.html_cart_at_menu #top .main_menu .menu>li:last-child {
    padding-right: 0 !important; 
    margin-right: 0 !important; 
}
ul#avia-menu-0.menu.av-main-nav {
	display: flex !important;
	flex-direction: row-reverse !important; 
}
}

    Then clear your browser cache and any cache plugin, and check.
    Expected results:
    2020-01-07-071409

    Best regards,
    Mike

    January 17, 2020 at 12:32 pm #1175337
    Yossi Yerushalmi

    Hi Mike

    I’m really sorry
    I didn’t see that you sent me a comment
    It works great!

    Thank you
    Yossi

    January 17, 2020 at 1:17 pm #1175369
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Shop, logo, search and burger menu, the order of icons on mobile’ is closed to new replies.