Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #299612

    Hi guys :D,

    Is there a way to put a searchbox in the mobile (hamburger) menu?

    Sincerely,
    Morticka

    #299616

    Hey Barb! :)

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 989px) {
    .html_mobile_menu_tablet .main_menu, .html_mobile_menu_tablet #header_main_alternate, .responsive #header .main_menu ul, #top #menu-item-search { display: block; }
    .av-main-nav li { display: none; }}

    It will display search icon on mobile, but not inside mobile menu

    Best regards,
    Yigit

    #299635

    Hey Yigit ;),

    Thx, works! How can I make the icon bigger and move it to the right, toward the hamburger icon?

    Sincerely,
    Barb

    #299638

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 990px) {
    li#menu-item-search a { font-size: 24px!important; }
    nav.main_menu { float: right; margin-right: 15%; }}

    Regards,
    Yigit

    #299651

    Hey Yigit,

    Works, almost perfect!! :D

    Questions:
    1. The search results (in the dropdown) are HUGE as well, can I make the font smaller?
    2. The search icon does not show up on iPad (portrait mode) while mobile menu is activated? (The secondary menu does not show up on smartphone but it does on iPad. This is done on purpose and I would like to keep it that way?)

    Sincerely,
    Barb

    • This reply was modified 7 years, 1 month ago by  Morticka. Reason: Little extra details
    #299668

    Hi!

    1- Please change the code to following one

    @media only screen and (max-width: 990px) {
    li#menu-item-search>a { font-size: 24px!important; }}

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .av_mobile_menu_tablet .main_menu { display: block; }}

    Best regards,
    Yigit

    #299687

    Hi Yigit :),

    I did’nt understand the first one:

    1- Please change the code to following one

    @media only screen and (max-width: 990px) {
    li#menu-item-search>a { font-size: 24px!important; }}

    I already changed the size of the icon, and I want to keep that size. But, when you type something in the searchbox, the font you see in the dropdown box is as big (I think?) as the size of the icon. And I only want to change the font in the dropdown box, or is that not possible?

    2: Yes, it shows up on iPad!! :D But it needs to move a little to the right, also towards the hamburger menu? On smartphone everything is perfect aligned now, just not on iPad.

    Sincerely,
    Barb

    #299689

    Hey!

    1- Please change the code i posted here – https://kriesi.at/support/topic/search-box-in-mobile-responsive-menu/#post-299638 to following one

    @media only screen and (max-width: 990px) {
    li#menu-item-search>a { font-size: 24px!important; }
    nav.main_menu { float: right; margin-right: 15%; }}

    2-

    @media only screen and (max-width: 990px) and (min-width: 500px) {
    nav.main_menu { margin-right: 12% !important; }}

    You can simply adjust the value to place it perfectly :)

    Cheers!
    Yigit

    #299703

    YES, WORKS PERFECT!!!

    Thx so much (again) Yigit :D

    One final question, how can I make the search icon on the desktop a little bigger as well? I’ve placed it in the primary header.

    Sincerely,
    Barb

    #299707

    Hey!

    You are welcome Barb, we are always glad to help! :)
    Please add following code to Quick CSS as well

    li#menu-item-search>a {
    font-size: 24px!important;
    }

    Cheers!
    Yigit

    #299715

    That’s it Yigit, everthing works like a charm!! :D

    Sincerely,
    Barb

    #299717

    Hey!

    Awesome! Let us know if you have any other questions or issues Barb! :)

    Best regards,
    Yigit

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Search box in mobile / responsive menu’ is closed to new replies.