Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 2, 2013 at 8:10 am #22709
    zOrg

    Any way to keep the header just be the header when scrolling, and NOT have it resize to a smaller version. Just be a header without the automatic resize feature.

    enfold theme

    Thank You! (love the theme by the way)

    May 2, 2013 at 2:41 pm #116933
    Devin

    Hi zOrg,

    In the theme options go to the Header section. The Header Type dropdown allows you to choose from Fixed (the sticky header) or the regular header which is what you want. It also has multiple styles to choose from with those variations as well.

    Regards,

    Devin

    May 2, 2013 at 2:46 pm #116934
    zOrg

    Right, tired them all – no luck. I’ve noticed some other settings not performing as well. I’m going to take a look at my server cache see if that does the trick.

    Thank you!

    May 2, 2013 at 3:28 pm #116935
    zOrg

    Okay – the change did finally work – needed a re-boot to my server. Thank you again. So, another question: is there a setting (or an adjustment/code) that can be made that so that the header stays the same size, but stays at the top and does not scroll with the page? Just like the “Fixed (sticky header)” without the auto resize effect?

    :-)

    May 2, 2013 at 11:36 pm #116936
    Ismael

    Hi,

    Edit js > avia.js and 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();
    
}

    Remove it.

    Or another way is to add this on your custom.css or Quick CSS

    #header_main .container, .main_menu ul:first-child > li a {
    
height: 88px !important;
    
line-height: 88px !important;
    
}

    Height and line-height will depend on the size of your logo.

    Regards,

    Ismael

    May 3, 2013 at 7:33 am #116937
    zOrg

    T H A N K Y O U! worked like a charm – Quick CSS. Perfect.

    Most excellent work the ENFOLD. Hope you make a $million$ off of it.

    May 3, 2013 at 12:28 pm #116938
    Devin

    Glad we could help :)

    Let us know if you have any other questions or issues.

    Regards,

    Devin

    June 13, 2013 at 5:07 pm #116939
    aovivo

    I have a question concerning the same issue.

    when i use the quick css two things happen:

    1) the logo is smaller afterwards

    2) a line (like an horizontal ruler) is added below the menu.

    any idea why this happens?

    thanks in advance

    June 15, 2013 at 1:13 pm #116940
    Nick

    Hi,

    In what browser? Do you have a URL to show us please since without a URL this is tricky.

    Thanks,

    Nick

    July 30, 2013 at 2:53 am #116941
    NCornelius

    The line is part of the main content block’s padding. The following is how I tackled it for my page.

    /* remove the padding from the main content to the bottom of the header */
    
.fixed_header.social_header #main {
    
padding-top: 88px; /* Change this to the thickness of your heading block */
    
}

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Header: How to make it NOT resize smaller when scrolling.’ is closed to new replies.