Logo dimension

Hello team,

I've been adding the custom css override in order to use a biggish round logo but cannot figure out what to do when the Fixed Menu Bar kicks in.

Could you please let me know the code needed to have the logo at max-height: 69px on the Fixed Menu Bar? Please find the current override used so far bellow. It's not final and I'm no css genius so I'm also keen to know if what I've done so far is correct and if it's the best approach to resize/reposition the logo accross various screen resolutions.

Preview; http://www.lightstyle.co.nz/web/dribres ... hp/newborn

Code: Select all

#gkLogo img {
margin: -25px 0px 0px 10px;
max-height: 233px;
}

@media (max-width: 360px) {
#gkLogo > img {
height: 89px !important;
}
}

@media (max-width: 980px) {
#gkLogo > img {
height: 144px;
margin: -15px 0px 0px 8px;
}
}

Thanks,
Andre

Code: Select all

#gkLogo img {
  max-height: 60px;
}


Should help.

Not really Cyberek, the code you suggested would change the logo for a normal view and would conflict with the max-height: 233px already in use. What I need is the css code that would define a max-height:69px for the #gkHeaderNav.gk-fixed-nav.

Thanks,
Andre

Hi Gavick,

Don't mean to put pressure but it's been 48hs and site needs to go live soon Any css suggestions to solve the logo on fixed menu?

Sorry for late response... You actually had exactly what you need - the only thing was to write them down:

Code: Select all

#gkHeaderNav.gk-fixed-nav #gkLogo img {max-height: 69px;}


Awesome, thanks for that.

Is there anything else I can help you with regarding this topic?

That's alll Cyberek, thanks. You may close the topic if you wish.

Usually we do not close the threads... Just in case someone will have similar question and somehow the solution will not work

Hi Team,

I'm trying to create media query for logo usage accross several devices and wonder if you could check (and adjust if needed) the code I'm using so far.

Code: Select all

#gkHeaderNav.gk-fixed-nav #gkLogo img {max-height: 69px;}

#gkLogo img {
margin: -25px 0px 0px 10px;
max-height: 233px;
}

@media (max-width: 360px) {
#gkLogo > img {
height: 89px !important;
}
}

@media (max-width: 980px) {
#gkLogo > img {
height: 144px;
margin: -15px 0px 0px 8px;
}
}

Thanks,
Andre

@arcolive - looks correct, but the easiest way is to simply add it to override.css and check if it is working.

Hi Cyberek,

It's already live at http://www.dribresciani.com.br/, the reason for asking was to double check with u guys if this is the best css approach as I'm not a css black belt

It's ok from what I see, and while it works... It's even better