Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 28, 2013 at 5:44 pm #25504
    yorkiebar182

    I am looking to remove the logo on the small fixed header so when you scroll down the page you only see the menu.

    It would be great if this could turn to a transparent(ish) black and the menu items centered.

    Thanks!

    http://www.eb-crafts.co.uk

    June 29, 2013 at 5:51 am #127201
    Ismael

    Hi,

    Edit js > avia.js, find this code

    //check if the browser supports element rotation
    
function avia_header_size()
    
{
    
var win	            = $(window),
    
header          = $('.fixed_header #header'),
    
logo			= header.find('.logo img'),
    
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 it with this:

    //check if the browser supports element rotation
    
function avia_header_size()
    
{
    
var win	            = $(window),
    
header          = $('.fixed_header #header'),
    
logo			= header.find('.logo img'),
    
logoimg			= $('.logo'),
    
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;
    
logoimg.show();
    
//header.removeClass('shadow');
    
}
    
else
    
{
    
newH = el_height/2;
    
logoimg.hide();
    
//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();
    
}

    Regards,

    Ismael

    July 8, 2013 at 6:18 pm #127202
    yorkiebar182

    That’s great thank you!

    Any way to change the menu to be black with white text? The sort of look I’m after is displayed on this theme: http://hogash-demo.com/kallyas_wp/ (Have to scroll quite a way down..!)

    July 9, 2013 at 7:29 am #127203
    Ismael

    Hi,

    You can try this

    .header_color .header_bg {
    
background-color: rgba(0,0,0,.9);
    
color: white;
    
}
    

    
.header_color .main_menu ul:first-child > li > a {
    
color: white;
    
}
    

    
.header_color .main_menu ul:first-child > li.active-parent-item > a {
    
color: gray;
    
}

    Regards,

    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Remove logo on fixed header’ is closed to new replies.