Tagged: header
-
AuthorPosts
-
May 9, 2013 at 8:56 pm #23058
When my logo shrinks it gets too small. Can I make the depth of the header area, once reduced, to be a bit taller?… it seems like that would cause a slightly larger version of my logo to be used.
Thanks!
May 9, 2013 at 9:24 pm #118396Hi,
Edit js > avia.js then find this code
//check if the browser supports element rotation
function avia_header_size()
{
var win = $(window),
header = $('.fixed_header #header'),
elements = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),
el_height = $(elements).filter(':first').height(),
isMobile = 'ontouchstart' in document.documentElement,
scroll_top = $('#scroll-top-link'),
set_height = function()
{
var st = win.scrollTop(), newH = 0;
if(st < el_height/2)
{
newH = el_height - st;
//header.removeClass('shadow');
}
else
{
newH = el_height/2;
//header.addClass('shadow');
}
elements.css({height: newH + 'px', lineHeight: newH + 'px'});
}
if(!header.length) return false;
if(isMobile)
{
return false;
}
win.scroll(set_height);
set_height();
}Replace that with
//check if the browser supports element rotation
function avia_header_size()
{
var win = $(window),
header = $('.fixed_header #header'),
elements = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),
el_height = $(elements).filter(':first').height(),
isMobile = 'ontouchstart' in document.documentElement,
scroll_top = $('#scroll-top-link'),
set_height = function()
{
var st = win.scrollTop(), newH = 0;
if(st < el_height/1.5)
{
newH = el_height - st;
//header.removeClass('shadow');
}
else
{
newH = el_height/1.5;
//header.addClass('shadow');
}
elements.css({height: newH + 'px', lineHeight: newH + 'px'});
}
if(!header.length) return false;
if(isMobile)
{
return false;
}
win.scroll(set_height);
set_height();
}It will reduced the header a bit more taller.
Regards,
Ismael
May 9, 2013 at 11:03 pm #118397Thanks Ismael. That fixes the end result… but the logo still shrinks smaller first when scrolling… then enlarges a bit. How can I keep it from doing this, and not go smaller first, then enlarge?
TX
May 10, 2013 at 2:28 am #118398Hi,
Yeah, I noticed it now. It becomes a bit blurry then adjust to the accurate size in a matter of point blank seconds. I’m running out of ideas. Let me tag the rest of the support team to help us out.
Regards,
Ismael
May 10, 2013 at 11:25 am #118399Hi,
Sorry, is there a url we can look at?
Thanks,
Nick
August 10, 2013 at 8:39 am #118400Hi guys. Thanks. revisiting this again. Just upgraded to 1.9.1.
This is kindof how I like it…
http://networkgreenhouse.com/responsive/brian-mcalpin/
In Chrome the logo shrinks to about half… in safari it’s more like 2/3 of original size. Either is ok, but they both go smaller first. You have to scroll kindof slow to notice it in some browsers.
Here.. I left the firs 2 alone, and changed the second one to 1.7. Any way I can get it to only shrink to it’s smaller sixe, w/o going smaller first?
Thanks again!…
August 12, 2013 at 7:38 pm #118401Hi mgma,
I don’t know what it is that is actually effecting that before it fully gets re-sized or if its a result of the above script. I’ve tagged Kriesi however to see if he can offer a solution.
Regards,
Devin
August 14, 2013 at 3:59 am #118402Thanks Devin.
August 17, 2013 at 7:07 pm #118403Hi,
I think, and this is not proven so perhaps you can try this, is the cause of this is the odd number in the height of your logo’s normal size, and the way that different browsers handle an odd number divided by two or for that matter how the handle remainders. Please try adding or cutting 1 pixel to your logo’s height and see if that changes this behavior. Because that would perfectly explain this phenomenon.
Thanks,
Nick
-
AuthorPosts
- The topic ‘how to control the size of the smaller logo and/or the depth of the header area’ is closed to new replies.