sidebar background/font colors on mobile devices.

Well-designed restaurant Joomla template with parallax effect.
GK User
Sat Sep 19, 2015 12:38 pm
Where can I change the background and font colors on the sidebar for mobile devices?

Cheers
User avatar
Fresh Boarder

GK User
Sat Sep 19, 2015 2:08 pm
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
User avatar
Platinum Boarder

GK User
Mon Oct 12, 2015 5:55 pm
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 :oops: :unsure:
User avatar
Fresh Boarder

GK User
Mon Oct 12, 2015 10:40 pm
You mean [=] ?
But on our demo it works fine, it opens mobile menu.
User avatar
Platinum Boarder

GK User
Mon Oct 12, 2015 11:49 pm
Yeah, it used to work:

http://www.littlebigeasy-zuerich.ch

I am at a loss here.
User avatar
Fresh Boarder

GK User
Tue Oct 13, 2015 7:32 am
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;}
}
User avatar
Platinum Boarder

GK User
Wed Oct 14, 2015 4:57 pm
Hi Oscar

Cheers for getting back to me so quickly.

One silly question. Where do I put that code? Override?
User avatar
Fresh Boarder

GK User
Thu Oct 15, 2015 12:01 pm
ok, I stuck it mobile.css. It seams to work but it not centered anymore.
User avatar
Fresh Boarder

GK User
Thu Oct 15, 2015 12:08 pm
Correction it only works with very small fingers ;)

Also sub-menus do not seam to work in horizontal view
User avatar
Fresh Boarder

GK User
Fri Oct 16, 2015 6:23 pm
All phones are made by little china fingers :whistle:
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.
User avatar
Platinum Boarder

GK User
Fri Oct 16, 2015 6:37 pm
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.
User avatar
Platinum Boarder

GK User
Wed Oct 21, 2015 2:42 pm
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
User avatar
Fresh Boarder

GK User
Wed Oct 21, 2015 3:16 pm
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....
User avatar
Fresh Boarder

GK User
Thu Oct 22, 2015 8:59 pm
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
User avatar
Platinum Boarder

GK User
Thu Oct 22, 2015 9:08 pm
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) {


??
User avatar
Fresh Boarder

GK User
Thu Oct 22, 2015 9:15 pm
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
User avatar
Platinum Boarder

GK User
Thu Oct 22, 2015 9:24 pm
Ok, tried that. Still need really small Chinese fingers ;)
User avatar
Fresh Boarder

GK User
Sun Oct 25, 2015 7:49 pm
Did you disabled mobile menu somehow? I do not see it anymore.
User avatar
Platinum Boarder

GK User
Sun Oct 25, 2015 7:53 pm
Yes. I can put in back though. Give me a minute
User avatar
Fresh Boarder

GK User
Sun Oct 25, 2015 7:57 pm
I took it ouot because multi-lang has an issue:
https://www.gavick.com/forums/steak-hou ... uage-48585
User avatar
Fresh Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.