Tagged: mobile, responsive, search box
-
AuthorPosts
-
August 4, 2014 at 11:57 am #299612
Hi guys :D,
Is there a way to put a searchbox in the mobile (hamburger) menu?
Sincerely,
MortickaAugust 4, 2014 at 12:07 pm #299616Hey 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,
YigitAugust 4, 2014 at 12:54 pm #299635Hey Yigit ;),
Thx, works! How can I make the icon bigger and move it to the right, toward the hamburger icon?
Sincerely,
BarbAugust 4, 2014 at 1:05 pm #299638Hey!
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,
YigitAugust 4, 2014 at 1:48 pm #299651Hey 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, 3 months ago by Morticka. Reason: Little extra details
August 4, 2014 at 2:15 pm #299668Hi!
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,
YigitAugust 4, 2014 at 2:55 pm #299687Hi 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,
BarbAugust 4, 2014 at 3:03 pm #299689Hey!
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!
YigitAugust 4, 2014 at 3:43 pm #299703YES, 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,
BarbAugust 4, 2014 at 3:46 pm #299707Hey!
You are welcome Barb, we are always glad to help! :)
Please add following code to Quick CSS as wellli#menu-item-search>a { font-size: 24px!important; }
Cheers!
YigitAugust 4, 2014 at 3:58 pm #299715That’s it Yigit, everthing works like a charm!! :D
Sincerely,
BarbAugust 4, 2014 at 4:05 pm #299717 -
AuthorPosts
- The topic ‘Search box in mobile / responsive menu’ is closed to new replies.