Mobile errors due to modification in style.css for larger logo

Hi

In order to fix issue on mobile, you can open file: //../layout-mobile.css and find the followings:

Code:

#ja-header .ground-menu1 {
    ...................... 
    left: 0;     <<< add this property
}

But I see error in displaying scroll bar in bottom site when you add property left: 120px

Open file: //../style.css

Code:

#ja-header .ground-menu1 {
   ...........................
   left: 120px; <<< remove this line;
}

Code:

#ja-mainnav {
   left: 120px; <<< add this line;
}

Code:

#ja-search .input-text {
    padding: 7px 90px 7px 15px;   <<< change to: padding: 7px 20px 7px 15px;
}

Code:

#ja-search button {
    right: 85px;   <<< change to: right: 0;
}

Dear Quanpa,

Thanks for helping me so far. I disabled one menu-item to make the menu shorter to get some distance between the menu and the search. Your suggestion works but gives one minor error in the smallest version of the website. The search icon is higher than the other two. Also the logo is not scaled in all mobile versions as you can see. Some are still using the logo as defined in styles.css. Can you give me some more hints on how to make it perfect?

See below the current situation (or visit dev.grannysfinest.com).

Attachment 29974
Attachment 29975
Attachment 29976
Attachment 29977

To fix height issue, you can edit some properties of class in file style.css for desktop:

PHP Code:

#ja-search form{
...
margin-top: 16px; <<< change it
...
}

#ja-search button {
...
top: 16px; <<< change it
...
} 




For mobile, you can change in file layout-mobile-portrait.css:

PHP Code:

.has-toggle .btn-toggle{
...
height: 35px !important; <<< change it
...
} 





Dear Quanpa,

I changed style.css but no improvement there. See below:
Attachment 30057Attachment 30058

The suggested change in layout-mobile-portrait.css I do not understand. The code is now:

Code:

.has-toggle .btn-toggle {
  display: block;
  width: 35px !important;
  height: 35px !important;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  text-indent:-1000em
}

As you can see the height is already 35px. What do you meam by

height: 35px !important; <<< change it

I meant that you can change that value as you desire such as

PHP Code:

height: 35px !important; 




to
PHP Code:

height: 40px !important;