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
Cheers
-
- 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
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
-
- 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
![:unsure:](/forum/images/smilies/unsure.png)
On mobile devices the menu icon just point me back to "home" when clicked.
Not sure where to change that
![Embarrassed :oops:](/forum/images/smilies/icon_redface.gif)
![:unsure:](/forum/images/smilies/unsure.png)
-
- Fresh Boarder
- GK User
- Mon Oct 12, 2015 10:40 pm
You mean [=] ?
But on our demo it works fine, it opens mobile menu.
But on our demo it works fine, it opens mobile menu.
-
- Platinum Boarder
- GK User
- Mon Oct 12, 2015 11:49 pm
-
- 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
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;}
}
-
- 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?
Cheers for getting back to me so quickly.
One silly question. Where do I put that code? Override?
-
- 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.
-
- Fresh Boarder
- GK User
- Thu Oct 15, 2015 12:08 pm
Correction it only works with very small fingers ![Wink ;)](/forum/images/smilies/icon_e_wink.gif)
Also sub-menus do not seam to work in horizontal view
![Wink ;)](/forum/images/smilies/icon_e_wink.gif)
Also sub-menus do not seam to work in horizontal view
-
- Fresh Boarder
- GK User
- Fri Oct 16, 2015 6:23 pm
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:
But about horizontal menu, you're right ....
your template version is 3.18 ?
I will do some more tests today.
![:whistle:](/forum/images/smilies/whistling.png)
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 ....
![Sad :(](/forum/images/smilies/icon_e_sad.gif)
your template version is 3.18 ?
I will do some more tests today.
-
- Platinum Boarder
- GK User
- Fri Oct 16, 2015 6:37 pm
In your override.css modify your line 14 with this:
of course use my code from last post also.
#gkHeaderNav #gkLogoSmall {
float: none;
left: 20% !important;
margin: 0 auto;
}
of course use my code from last post also.
-
- 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
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
-
- Fresh Boarder
- GK User
- Wed Oct 21, 2015 3:16 pm
Ok tried this:
This also move my small logo on the desktop site to the left.
Hmmm....
- 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....
-
- Fresh Boarder
- GK User
- Thu Oct 22, 2015 8:59 pm
so put your code inside this:
so will be used only on small tables and mobile devices
@media only screen
and (min-device-width : 270px)
and (max-device-width : 768px) {
....
}
so will be used only on small tables and mobile devices
-
- Platinum Boarder
- GK User
- Thu Oct 22, 2015 9:08 pm
Ok, so I replace this:
with:
??
- 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) {
??
-
- Fresh Boarder
- GK User
- Thu Oct 22, 2015 9:15 pm
TRY NOW
if 768px will be to big screen , use 600px instead
@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
-
- Platinum Boarder
- GK User
- Thu Oct 22, 2015 9:24 pm
Ok, tried that. Still need really small Chinese fingers ![Wink ;)](/forum/images/smilies/icon_e_wink.gif)
![Wink ;)](/forum/images/smilies/icon_e_wink.gif)
-
- Fresh Boarder
- GK User
- Sun Oct 25, 2015 7:49 pm
Did you disabled mobile menu somehow? I do not see it anymore.
-
- Platinum Boarder
- GK User
- Sun Oct 25, 2015 7:53 pm
Yes. I can put in back though. Give me a minute
-
- 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
https://www.gavick.com/forums/steak-hou ... uage-48585
-
- Fresh Boarder
20 posts
• Page 1 of 1