Changing logo positions on browser resize

Hey everyone at Gavick! Just signed up for the lifetime membership and I couldn't be happier!

Alright, so I'm working with the Magazine template and I made the logo position to 'fixed' in CSS so that it stays on the screen as a user scrolls down. It essentially looks like this:


However the problem is when the browser gets reduced and it goes to tablet/mobile phone mode, the logo remains and while a person scrolls down on an iPad...etc, the logo stays and obstructs the view.

Now what I want to do is make the logo disappear when it's in 'tablet/phone' mode and then have it appear above the mobile menu on the left side, like this:


The best I have achieved is using the Advanced Module Manager, creating a new module and inserting a 52x52px logo image in there, then having it only appear when a person's browser is a mobile platform.

The problem with this is it doesn't resize/shift dynamically like the mobile menu does in the Magazine template. I also haven't found a way to make the logo disappear when the browser is resized (tablet/phone).

So Gavick, is this possible? If so, can you guide me in the right direction?

Thanks in advance!

Could You please post an url to your site?
What you need to do is use css media-queries, but I need to see your site first to create working declaration or give you a good guide how to do that.

Hey Cyberek!

Thanks for the response! The site is actually off line right now, in fact it hasn't gone online, ever.

Just trying to nail out everything before it sees the light of day, however can guide me using the Gavick Pro Magazine demo that's currently live?

Perhaps you can post it somewhere temporary? I need to see working code with changes you have made to them.

Hey Cyberek!

I'll create a new user/pass for you and send you the link in a PM. Thanks for the help!

Sorry, but I cant login with those data.

Sorry, but I cant login with those data.

Hey Cyberek!

I changed the password, so...

U: Cyberek
P: (****)

Just tried it, it works!

Ok. You need to use override.css and technique called media-querries.
Right now your template is set to 4 steps:
1300px (small desktop)
1030px (tablet)
820px (small tablet)
580px (mobile)

If you would like the "big" logo to dissapear on a tablet, then use this code:

Code: Select all

@media (max-width: 1030px) {
  #gkLogo {
    display: none;
  }
}


What it does - it hides an element with ID gkLogo when screen width is under 1030px;

Of course you need also to add your new logo (which is not there right now so I can't give you exact working code), and set it to be hidden above decided screen size and show it under it.
Lets assume it has and ID = "smallLogo". Then the css will looks this way:

Code: Select all

#smallLogo {display: none;}
@media (max-width: 1030px) {
  #smallLogo {
    display: block;
  }
}


What it does - it hides an element with ID gkLogo when screen width is above 1030px (to be precisely it hides it always) and shows it when it is under 1030px (the condition with screen size does it);

Remember to enable "CSS override" in template settings - advanced section.

So cool! It worked!

Thanks Cyberek!

Ok. You need to use override.css and technique called media-querries.
Right now your template is set to 4 steps:
1300px (small desktop)
1030px (tablet)
820px (small tablet)
580px (mobile)

If you would like the "big" logo to dissapear on a tablet, then use this code:

Code: Select all

@media (max-width: 1030px) {
  #gkLogo {
    display: none;
  }
}


What it does - it hides an element with ID gkLogo when screen width is under 1030px;

Of course you need also to add your new logo (which is not there right now so I can't give you exact working code), and set it to be hidden above decided screen size and show it under it.
Lets assume it has and ID = "smallLogo". Then the css will looks this way:

Code: Select all

#smallLogo {display: none;}
@media (max-width: 1030px) {
  #smallLogo {
    display: block;
  }
}


What it does - it hides an element with ID gkLogo when screen width is above 1030px (to be precisely it hides it always) and shows it when it is under 1030px (the condition with screen size does it);

Remember to enable "CSS override" in template settings - advanced section.

Great. I'm glad all my writings was understandable for you .
Ps - you can use this method on any page (not only our templates) - its just a generic method of creating conditional css declarations form different screen sizes .