Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 4, 2014 at 11:57 am #299612
    Morticka

    Hi guys :D,

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

    Sincerely,
    Morticka

    August 4, 2014 at 12:07 pm #299616
    Yigit

    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

    August 4, 2014 at 12:54 pm #299635
    Morticka

    Hey Yigit ;),

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

    Sincerely,
    Barb

    August 4, 2014 at 1:05 pm #299638
    Yigit

    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

    August 4, 2014 at 1:48 pm #299651
    Morticka

    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 10 years, 4 months ago by Morticka. Reason: Little extra details
    August 4, 2014 at 2:15 pm #299668
    Yigit

    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

    August 4, 2014 at 2:55 pm #299687
    Morticka

    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

    August 4, 2014 at 3:03 pm #299689
    Yigit

    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

    August 4, 2014 at 3:43 pm #299703
    Morticka

    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

    August 4, 2014 at 3:46 pm #299707
    Yigit

    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

    August 4, 2014 at 3:58 pm #299715
    Morticka

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

    Sincerely,
    Barb

    August 4, 2014 at 4:05 pm #299717
    Yigit

    Hey!

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

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Search box in mobile / responsive menu’ is closed to new replies.