mobile search icon near the cart in mobile view

HI Elliott,

thanks for helping me. search icon is not shown all the time.
I some size it creates a lot of white space below to show the search field.

May create a feature request. this would be nice.
i dream of having the search, cart and menu icon on the right side below each other in mobile view.
so the logo is not covered by the icons to much.

now

https://www.dropbox.com/s/elpfay86czchb2p/2015-01-08%2005.36.49.png?dl=0
—
it should be

https://www.dropbox.com/s/palxt9wuoj3zdzk/less-space-and-icons-on-side.jpg?dl=0
cart, menu, search icon should be in one row and space optimiced.

thanks

Hey Elliott,

I insert this code and got the icon shifting behind the cart- and menu icon.
Above 990px the cart icon is sticked to the right window. http://awesomescreenshot.com/07c45pyr77
Can we leave menu, cart, search sticked to the right side when showing on smaller screens.
So the three icons not cover the logo and not cover each other.
This could be a feature request and discussed in your team please.

i insert into child custom css:
/*Add your own styles here:*/
@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; }}

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

@media only screen and (max-width: 767px) {
.main_menu {
left: auto !important;
position: absolute !important;
right: -90px !important;
top: -5px !important;
}
}

like you can see on https://www.santegra-international.com/ if you smaller the screen search icon i shifting and not fixed.
No search icon/cart between 767px and fullscreen als if i change @media only screen and (max-width: 767px) { to 989px

is there a full version of your CSS? ;-)

my css is looking like this:
@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; }}

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

@media only screen and (max-width: 989px) {
.main_menu {
left: auto !important;
position: absolute !important;
right: -90px !important;
top: -5px !important;
}
}
@media only screen and (max-width: 989px) {
#advanced_menu_toggle {
position: absolute;
right: -30px !important;
top: 0 !important;
}
.cart_dropdown {
position: absolute !important;
right: -30px !important;
top: 70px !important;
}
}

i tried this also which is online at the moment:
Still search icon/cart between 767px and fullscreen als if i change @media only screen and (max-width: 767px) { to 989px

/*search icon, cart in mobile view*/
@media only screen and (max-width: 989px) {
#advanced_menu_toggle {
position: absolute;
right: -10px !important;
top: 18px !important;
}
.cart_dropdown {
position: absolute !important;
right: -40px !important;
top: 50px !important;
}
li#menu-item-search a { font-size: 24px!important; }
nav.main_menu {
position: absolute !important;
right: -30px !important;
top: 30px !important;
}
}

If possible hand the request over to a fullsolution developer please.

DANKE

HI thanks,
much more logic now.

a) why could they be not above each other?
they all:
position: absolute;
right: -10px !important;
—
b) No search icon/cart between 767px and fullscreen als if i change @media only screen and (max-width: 767px) { to 989px
—

/*Add your own styles here:*/
/*search icon, cart in mobile view*/
@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; }}

@media only screen and (max-width: 989px) {
#advanced_menu_toggle {
 position: absolute;
 right: -10px !important;
 top: 18px !important;
}
.cart_dropdown {
   position: absolute !important;
   right: -10px !important;
   top: 50px !important;
}
li#menu-item-search a { font-size: 24px!important; }
nav.main_menu { 
   position: absolute !important;
   right: -10px !important;
   top: 30px !important; 
}
}

2.) the icon does not show up between 767 px and 989 px width.

already done if you look at the page.
no affect.

no search does not show up on smaller screens see screenshot and try on santegra-internationa.com
http://awesomescreenshot.com/040488ze41

Feature request: See this solution is nice:
http://awesomescreenshot.com/0d34ak2g51

ok. Update to verion 3.1 fix the cart icon in mobile view 100%.
Please show the search icon in the same way please.

The code i use before the update was:
I deleted this CSS on my site and wait for your new code.

/*search icon, cart in mobile view*/
@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; }}

@media only screen and (max-width: 989px) {
#advanced_menu_toggle {
 position: absolute;
 right: -10px !important;
 top: 18px !important;
}
.cart_dropdown {
   position: absolute !important;
   right: -10px !important;
   top: 50px !important;
}
li#menu-item-search a { font-size: 24px!important; }
nav.main_menu { 
   position: absolute !important;
   right: -10px !important;
   top: 30px !important; 
}
}

Hey Ismael,

if you don´t mind my request is about the Search Icon.
I provide the screenshot to get directly to the code to show the search icon.
http://awesomescreenshot.com/0af4n6l09d

thanks Ismael, it is working good.

hi i need help with the search icon again please.
it is really bad that it is not an option i can activate.
So please login
activate the search icon under 989 px
align the cart icon
below 500 px the search icon and the cart icon and the menu should be under the logo.
all icons in one line all the time.

cachify icon is on the right corner (to empty cache)

i am really up to quite with enfold, because everything had to be coded.
but i this get fixed you save my website from being changed. ;-)