Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 6, 2015 at 11:03 pm #514832
    Cenabarato

    Hi,
    I used Enfold theme in blog mode and in responsive mode the sidebar is hidden.

    How Can I Show the Control “Search” in mobile mode ?

    I thought I could put you use the widget to search the footer but I just want to show the widget in the mobile view , is that possible?

    In the desktop view I have the widget in the sidebar and the top header

    Thanks!

    October 7, 2015 at 1:28 pm #515186
    Andy

    Hi Cenabarato!

    check out this post: https://kriesi.at/support/topic/search-icon-disappears-on-mobile-after-enfold-update-3-1-3/#post-421148

    Cheers!
    Andy

    October 7, 2015 at 11:49 pm #515509
    Cenabarato

    Hi Andy,

    Thanks for your reoly.

    I added this code in the Enfold CSS:

    @media only screen and (max-width: 480px) {
li#menu-item-search {
  margin-top: 0;
}}

    I it’s don’t work,
    Can you help me?

    Thanks

    October 8, 2015 at 9:09 am #515635
    Rikard

    Hi,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    October 8, 2015 at 3:26 pm #515863
    Cenabarato

    Hi Rikard,

    Thanks for your reply.

    I attach a access data for my website.
    In the Enfold menu Quick CSS you can see the following code:

    @media only screen and (max-width: 480px) {
li#menu-item-search {
  margin-top: 0;
}}

    Thanks

    Regards,

    October 10, 2015 at 1:05 am #516713
    Cenabarato

    Hi, You can see the solution for my problem?

    I saw that anyone logged in the web with the user.

    I’m testing possible solution that I find in your forum but I dont get a correct solution. I need a SEARCH ICON next to MENU ICON in mobile view (Similar yo SHOPPING CARD ICON in Enfold Demo).

    I’m reading and temporaly I made a solution, but I dont like this solution, you can see here:

    search icon

    Thanks

    Regards

    October 12, 2015 at 10:54 am #517247
    Ismael

    Hey!

    It’s actually possible to add the search bar inside the mobile menu. Would you like something like that? Add this in the functions.php file:

    add_filter( 'wp_nav_menu_items', 'avf_add_search', 3, 2 );
function avf_add_search( $items, $args ) {
	if ($args->theme_location == 'avia')
	{
		$search = '<li id="menu-item-search-mobile" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-top-level menu-item-top-level-5">'.get_search_form(false).'</li>';
		$items = $search . $items;
	}
	return $items;
}

    After that, use this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
	#top #searchform>div {
		display: block !important;
		opacity: 1 !important;	
	}
}

    If you only want the icon in the header, use this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: block;
}

.main_menu .avia-menu li { display: none; }

.main_menu #menu-item-search {
    z-index: 100;
    display: block;
    position: absolute;
    left: 430px;
    top: -80px;
}
}

    Cheers!
    Ismael

    October 14, 2015 at 12:11 am #518445
    Cenabarato

    thank you for your reply Ismael.

    I want the second option and with your code and this css code I get that the search button similar to Menu button:

    @media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: block;
}

.main_menu .avia-menu li { display: none; }

.main_menu #menu-item-search {
    z-index: 100;
    display: block;
    position: absolute;
    border: 1px solid #e1e1e1;
    height:46px;
    width:46px;
    top: -80px;
    margin-top:17px;
   border-radius:2px;
}

#top #menu-item-search.menu-item-search-dropdown>a{
line-height:46px !important;
}

.avia-menu.av_menu_icon_beside{
    float: right;
    margin-right: 80px;
}
.main_menu #menu-item-search:hover{
background-color: #8ac318;
color: #ffffff;
border-color:#8ac318;
}
}

    Regards,
    Thanks

    • This reply was modified 9 years, 2 months ago by Cenabarato.
    October 15, 2015 at 11:02 am #519113
    Ismael

    Hey!

    Great! Is it OK now? Or do you need anything else?

    Regards,
    Ismael

    October 15, 2015 at 11:15 am #519116
    Cenabarato

    Hi Ismael,

    Thanks for your help, now it’s works correctly

    October 16, 2015 at 5:21 am #519663
    Rikard

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Search Widget only in mobile view’ is closed to new replies.