customize the mobile menu to be : logo+search icon+cart icon+menu icon

Hi YongyanLi,

Here is the code you can put this in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (max-width: 767px) {  
#menu-item-shop .cart_dropdown_link {
	padding: 0 24px;
}

#menu-item-shop #menu-item-search {
	width: 0px;
}

#menu-item-shop #menu-item-search  .avia-search-tooltip.avia-tt {
	left: -16px !important;
}
#menu-item-shop {
    min-width: 110px;
}
}

This will move the search from below the menu, but in general it’s not a good solution. Your logo is text, there is no need to have it as an image. It would be more flexible, better for SEO if you had it as text.

If you need further assistance please let us know.
Best regards,
Victoria

Hi,

Sorry for the late reply, we checked your site but did not find the search icon in the mobile version. From the previous discussion, it appears the search icon was active in the mobile version. Let us know if this was intended or if you still like to add the search icon try the below css in the quick CSS section.

@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu {
    display: block;
}
.av-main-nav li { display: none; }
li#menu-item-search {
    display: block;
    right: 70px;
}}

If you still have any issue please upload a screenshot/mockup of what you are trying to achieve to imgur.com and share the link here so we can help you better :)

Best regards,
Vinay

Hey!

We work closely with some popular plugin authors to release an update if there are any compatibility issues. You will soon notice an update :)
For testing purpose try to deactivate the incompatible plugin and install an alternate caching plugin to see if that helps you fix the issue.

Cheers!
Vinay

• This reply was modified 7 years ago by Vinay.

Hi,

As I understand you want to show the search icon in tablets and mobile correct?
Please remove all the code related to this modification so to avoid any conflict.

I have tried this code on my installation and it works 100% in case you do not see any changes after adding this code please make sure the cache is purged in caching plugin and deactivate the caching plugin.

@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu {
    display: block;
    position:absolute;
    width:100%;    
}
#menu-item-burger{
	display:none!important;
}
.av-main-nav li { display: none; }
li#menu-item-search {
    display: block;
    transform:translate(0,-100%);    
	left:63%;
}}

Best regards,
Vinay

• This reply was modified 7 years ago by Vinay.

Hi,

I have tested this code on my installation and it works fine. Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

Login credentials include:

• The URL to the login screen.
• A valid username (with full administration capabilities).
• As well as a password for that username.
• permission to deactivate plugins if necessary.

Best regards,
Vinay

Hi,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

Login credentials include:

• The URL to the login screen.
• A valid username (with full administration capabilities).
• As well as a password for that username.
• permission to deactivate plugins if necessary.

Best regards,
Vinay

Hi,

Have you tried the code provided and it did not worked out?
Or what you did?

Also please note if you need quicker help, best is to open your support ticket

Best regards,
Basilis

Hi spMongiat and orangeamps,

Please start a separate thread, it got very confusing at this point and you did not get your issue resolved.

If you need further assistance please let us know.
Best regards,
Victoria