sidebar background/font colors on mobile devices.

Where can I change the background and font colors on the sidebar for mobile devices?

Cheers

Hi,
it's not so easy, because first you have to detect mobile screen size, then use custom CSS code.
I can give you 3 useful tips, so if you're smart guy you will handle it.
1) In custom css use: @media (max-width: 480px) { here-your-css-code }
2) On desktop computer check which class you have to change - override , check features of Firebug tool
Read: https://www.gavick.com/documentation/jo ... mplate-css
3) Test on: http://quirktools.com/screenfly/ or on real device - use refresh icon quite often

Thank you for that I will get into it asap, or after I have resolved another issue.

On mobile devices the menu icon just point me back to "home" when clicked.

Not sure where to change that

You mean [=] ?
But on our demo it works fine, it opens mobile menu.

Yeah, it used to work:

http://www.littlebigeasy-zuerich.ch

I am at a loss here.

thanx for url, now I guess I know why...
because scrolled logo is too big and takes area of [=] .
To test it just rotate you phone horizontally and menu button will work again.

Try this, it may help

@media (max-width: 400px) {
#gkLogoSmall img {height: 45px !important;margin: auto 0 !important;}
}

Hi Oscar

Cheers for getting back to me so quickly.

One silly question. Where do I put that code? Override?

ok, I stuck it mobile.css. It seams to work but it not centered anymore.

Correction it only works with very small fingers

Also sub-menus do not seam to work in horizontal view

All phones are made by little china fingers
I was able to correct only logo size not how mobile menu works.
But please add also this:

#gkMobileMenu { z-index: 100;}

But about horizontal menu, you're right ....
your template version is 3.18 ?
I will do some more tests today.

In your override.css modify your line 14 with this:

#gkHeaderNav #gkLogoSmall {
float: none;
left: 20% !important;
margin: 0 auto;
}

of course use my code from last post also.

Thank you. Added the code will test later when I add the menus back.

Having a multi lang issue at the moment wich I need to figure out.

I have version 3.15.

I saw that there were updates. Do I download the template or the quickstart?

Cheers

Ok tried this:

Code: Select all

#gkHeaderNav #gkLogoSmall {
float: none;
left: 20% !important;
margin: 0 auto;
}
#gkMobileMenu { z-index: 100;}

This also move my small logo on the desktop site to the left.

Hmmm....

so put your code inside this:

@media only screen
and (min-device-width : 270px)
and (max-device-width : 768px) {

....

}

so will be used only on small tables and mobile devices

Ok, so I replace this:

Code: Select all

@media (max-width: 400px) {
#gkLogoSmall img {height: 45px !important;margin: auto 0 !important;}
}

with:

Code: Select all

@media only screen
and (min-device-width : 270px)
and (max-device-width : 768px) {


??

TRY NOW

@media only screen
and (min-device-width : 270px)
and (max-device-width : 768px) {
#gkLogoSmall img {height: 45px !important; margin: auto 0 !important;}
}

if 768px will be to big screen , use 600px instead

Ok, tried that. Still need really small Chinese fingers

Did you disabled mobile menu somehow? I do not see it anymore.

Yes. I can put in back though. Give me a minute

I took it ouot because multi-lang has an issue:
https://www.gavick.com/forums/steak-hou ... uage-48585