Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 18, 2018 at 2:01 pm #899135
    Dedagroup

    Hi.
    I am currently building a website in the Enfold theme, and the searchform is just a magnifying glass which comes out as a dropdown.
    I would like the drop down version to be visible all the time instead of just a magnifying glass.

    Also i would like to move it up next to the shopping cart, but how do i do this? :)

    January 19, 2018 at 6:47 am #899533
    John Torvik

    Hey Dedagroup,

    Please, you need to hire a freelancer to modify the CORE and make these changes.

    Best regards,
    John Torvik

    January 20, 2018 at 2:45 pm #900085
    Dedagroup

    Hmm. okay.
    Is it easier to just remove that search form and instead put in another one like Ajax lite/pro?

    January 20, 2018 at 6:47 pm #900152
    Mike

    Hi,
    Perhaps this will help: https://kriesi.at/support/topic/enfold-removing-the-search-magnifying-glass-and-adding-in-the-search-field/#post-278483
    or you can try a plugin.

    Best regards,
    Mike

    January 20, 2018 at 11:01 pm #900218
    Dedagroup

    Thank you very much Mike :)
    That actually helped a lot!

    January 20, 2018 at 11:03 pm #900220
    Dedagroup

    Now i just have a problem with the burger menu.
    it shows 2 places on the mobile.
    in the header i now placed it where i want it, but for some reason there is also one to the left right underneath the logo :/

    I have shared a link in private content.

    January 20, 2018 at 11:41 pm #900234
    Mike

    Hi,
    That is strange, I just tested the code from the link above and I don’t get the same behavior. For me the search is hidden at mobile width.
    There also seems to be a conflict with this in your custom css:

    li#menu-item-search {
  display: block!important;
  margin-top: 10px;
  right: -20px;
}

    Do you plan to show the search box on mobile?

    Best regards,
    Mike

    January 20, 2018 at 11:49 pm #900236
    Dedagroup

    Yeah my search box is shown right under the header and also in the top section of the menu when it’s folded out.

    What kind of conflict?
    I put that in to make it show the search bar :)

    January 21, 2018 at 5:16 pm #900386
    Mike

    Hi,
    the “display: block!important;” is making it show at mobile when it is suppose to be hidden.
    Try replacing the above code and the code from the other article with this:

    @media only screen and (min-width: 990px) { 
li#menu-item-search {
  margin-top: 10px;
  right: -20px;
}
#top #searchform > * {
opacity: 1 !important;
display: block !important;
}
}

    Best regards,
    Mike

    January 21, 2018 at 5:58 pm #900406
    Dedagroup

    Hi mike :)
    thank you for taking time to help me out.
    That didn’t work for me. My search bar disapeared on my mobile, but maybe i’m not doing it quite rigt.

    I have made you a user login and put in the private content if you want to log in and look at what i have done wrong :D

    January 21, 2018 at 7:40 pm #900445
    Mike

    Hi,
    I replaced your quick css with this:

    @media only screen and (min-width: 990px) {
.only-mobile-menu-search { display: none !important; }
}

@media only screen and (max-width: 480px) {
.responsive .logo img {
    max-height: 62px!important;
}}
@media only screen and (max-width: 479px) {
  #menu-item-shop .cart_dropdown_link {
     padding: 0 5px 0 5px;
  }
}
@media only screen and (max-width: 426px){ 
.responsive #top #wrap_all .logo a > img {width: 183px !important;}
.responsive #top #wrap_all .main_menu {right: 10px!important; }}

@media only screen and (min-width: 767px) and (max-width: 989px) { 
li#menu-item-search {
    display: none !important;
}
#top #searchform {
    margin-top: -45px !important;
}
#header_main_alternate .container {
  padding: 0px !important;
}
.av-main-nav li.only-mobile-menu-search {
    float: right !important;
}
}

#top #searchform > * {
opacity: 1 !important;
display: block !important;
}

    There were a lot of changes I had to make to fix the extra search, the extra mobile menu, the main menu not fitting in the space for tablets, etc. I hope it’s what you had in mind, please see screenshot in Private Content area.
    Here is your old css if you want to change back to the way it was:

    @media only screen and (min-width: 990px) {
.only-mobile-menu-search { display: none !important; }}

@media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate {
  display: block !important;
    position: relative;
	z-index: -1;
}
.av-main-nav > li { display: none; }
li#menu-item-search {
  display: block!important;
  margin-top: 10px;
  right: -20px;
}
.responsive .main_menu {
  float: right;
}
}
@media only screen and (max-width: 480px) {
.responsive .logo img {
    max-height: 62px!important;
}}
@media only screen and (max-width: 479px) {
  #menu-item-shop .cart_dropdown_link {
     padding: 0 5px 0 5px;
  }
}
@media only screen and (max-width: 426px){ 
.responsive #top #wrap_all .logo a > img {width: 183px !important;}
.responsive #top #wrap_all .main_menu {right: 10px!important; }}

#top #searchform > * {
opacity: 1 !important;
display: block !important;
}

    Best regards,
    Mike

    January 21, 2018 at 7:49 pm #900448
    Dedagroup

    Thank you :)

    But i had a search bar on mobile phone with the CSS i had in and thats gone now. Just also another burger menu.
    (see image in private content)

    January 21, 2018 at 8:56 pm #900454
    Mike

    Hi,
    Ok, here are the new changes:

    @media only screen and (min-width: 767px) and (max-width: 990px) {
#menu-item-search.noMobile.menu-item.menu-item-search-dropdown.dropdown_ul_available { display: none !important; }}

@media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate {
  display: block !important;
    position: relative;
	z-index: -1;
}
.av-main-nav > li { display: none; }
li#menu-item-search {
  display: block!important;
  margin-top: 10px;
  right: -20px;
}
.responsive .main_menu {
  float: right;
}
}
@media only screen and (max-width: 480px) {
.responsive .logo img {
    max-height: 62px!important;
}}
@media only screen and (max-width: 479px) {
  #menu-item-shop .cart_dropdown_link {
     padding: 0 5px 0 5px;
  }
}
@media only screen and (max-width: 426px){ 
.responsive #top #wrap_all .logo a > img {width: 183px !important;}
.responsive #top #wrap_all .main_menu {right: 10px!important; }}

#top #searchform > * {
opacity: 1 !important;
display: block !important;
}
@media only screen and (max-width: 767px) {
#header_main_alternate li.av-burger-menu-main.menu-item-avia-special {
display: none !important;
}
}
@media only screen and (min-width: 767px) and (max-width: 989px) { 
li#menu-item-search {
    display: none !important;
}
#top #searchform {
    margin-top: -45px !important;
}
#header_main_alternate .container {
  padding: 0px !important;
}
.av-main-nav li.only-mobile-menu-search {
    float: right !important;
}
}
@media only screen and (min-width: 990px) {
.only-mobile-menu-search { display: none !important; }}

    Please clear your browser cache and check.

    Best regards,
    Mike

    January 21, 2018 at 8:58 pm #900455
    Dedagroup

    Thank you so much! :D
    You saved my week! :D

    January 21, 2018 at 9:23 pm #900459
    Mike

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

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Search form not as dropdown?’ is closed to new replies.