Making header logo and icons responsive

Hi,

The logo and my additional first two icons are not responsive. The icons are custom icons, since I can not find this kind of icons on FontAwesome website. I'd also like to use transition for this icons, similar to the rest of them in Steak House Theme.

The code I've used so far (with the help from Forum) doesn't seem to work for me:

Code: Select all

.gk-logo img {
max-width: 100%;
}

Code: Select all

height: 10%;
width: 10%;
max-width: 100%;


Code: Select all

transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
color: #ffffff;
}

Also, how can I make this first picture to stretch all the way to the bottom and remain responsive?

Link: kckm.si
User: ***
Pass: ***

Thank you!

Matej

Hi,

Try to add this code into css/mobile.css file:

Code: Select all

#gk-header-nav .gk-logo {
margin: 0 0 0 -28px;
}


but I'm not sure where is the issue with the header icons? - they look very good I think.

I still need help with my first two icons. They are not responsive, plus transparency doesn't work for them. I wish my logo would be responsive also, just as original Steak House Logo.

Please help. Thx

Still don't understand, please check the attachments - logo and icons looks exactly as on the Steakhouse demo:
https://demo.gavick.com/wordpress/steakhouse/

Here, I attached screen shots. This takes place when resizing the screen!

Thx,
Matej

Ok, but on our demo website it's the same situation, logo is not scaled down when you are resizing the browser.
Anyway, try to add following code into css/override.css file:

Code: Select all

@media (max-width: 680px) {
.gk-logo img {
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
max-width: 370px
}
}


and adjust these values.

I need to see your website to give you the code for the icons (could you send me a private message with access to your website)?

The Header is not stretched to the full height of the browser (the height depends on the content).

If you want to change it, you can use media querier, like the previous code with the logo and adjust your header height manually:

Code: Select all

#gk-header {
height: ...px
}


you can use another height values depends on the max-width value

Icons may be scaled with the same rules like the logo:

Code: Select all

@media (max-width: 680px) {
#gk-header-mod .gk-short-menu li {
  -ms-transform: scale(0.6);
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
}


The logo doesn't look as high-res on mobile devices as it does on a desktop browser, why is that? I used the code you provided.

It also doesn't seem to be centered on mobile devices.

Hi,
@hammyhavoc, could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?