Logo "overlapping" in STEAKHOUSE-template?

GK User
Mon Sep 01, 2014 8:28 am
Hey guys!
I am trying a bit around with your great STEAKHOUSE-template and actually I am running into this issue:

Out of the box the Logo is placed entirely inside the navigation-bar.
As I need to use a upright formatted logo the image either gets too small or the navibar gets huge.
Bildschirmfoto 2014-09-01 um 09.24.56.png


Is it possible to get the logo overlapp the header-navigation a bit?
Like this:
Bildschirmfoto-2014-09-01-um-09.25.56.jpg


That would be absolutely awesome.

Looking forward to your reply & thank you very much in advance!
User avatar
Expert Boarder

GK User
Mon Sep 01, 2014 8:31 am
I figured out, that the logo is able to overlap out of the box in the mobile-template - see screenshot:
Unbenannt-2.jpg


That would be exactly what I would need to be in the main-view, too! :-)
User avatar
Expert Boarder

GK User
Mon Sep 01, 2014 6:21 pm
Figured it out by myself.

Activate custom.css

and put the following code in advanced settings:
Code: Select all
#gkLogoSmall img {
    margin: 0;
   max-height: 190px;
    width: auto;
}
User avatar
Expert Boarder

GK User
Mon Sep 01, 2014 6:46 pm
with
max-height: XXXpx;
you can adjust the overlapping of the logo :-)
User avatar
Expert Boarder

GK User
Mon Sep 01, 2014 7:03 pm
Well - it was too easy, I guess.
Now in the "normal" view it really looks BRILLANT!
But unfortunately the logo stays that big - even in the smalles mobile view - there it is overlapping the content in the bottom a bitt too much.

So now finally I need your highly appreciated help on that issue...

How can I get the logo in the bigger views looking exactly as it is to be seen here:
Bildschirmfoto 2014-09-01 um 19.52.14.png


And shrink a bit in mobile view.
Here's the link to my page: http://cool-o-mat.com/_energetic/

Possibly there is another way of getting rid of that problem:
Is it possible to make a module to appear only on the big views and collapse in the mobile view - and other way round - a module to be not visible in the big resolutions and get visible in the smallest mobile mobile view?

If that's possible, I have my perfect solution.
User avatar
Expert Boarder

teitbite
Tue Sep 02, 2014 8:13 pm
Hi

You can use different max-height: XXXpx; values in tablet.css and mobile.css to resize it for this devices.
User avatar
Moderator

GK User
Thu Sep 04, 2014 10:15 am
Yeah - wokrs perfect. Thank you very much!
User avatar
Expert Boarder

teitbite
Fri Sep 05, 2014 10:13 am
Hi

Great to hear that :) Glad I could help.
User avatar
Moderator


cron