Innovation-extend question

[Steve Brown]

I have started using the above theme and have created a child theme to make a few alterations necessary. However, I seem to be having a problem with one item.

I need to make the company logo bigger so have used

img.site-logo{width:40%;height:auto;padding:5px 0;float:left; font-size: 75px;}

This works fine but sometimes when the page loads a grey bar appears between the header menu and the main page (the slider on the home page). For some reason this appears to be completely random and can vary in size when reloaded or many times not appear at all. I can only think that this is the CSS line that is causing the issue?

Could this be either part of the responsive settings or alternatively could this be a header size I need to fix?

I can send a link privately but the site is pre-launch at the moment and I don’t want to publicise it’s temporary URL.

Thanks

Steve

[Steve Brown]

Another addition to this, sometimes the opposite happens when the main page body locates itself above the bottom of the header therefore losing part of the main content. Tested with the same results on Safari, Firefox & Chrome on both Mac & PC

[D5 Creation]

What is your Site URL?

[Steve Brown]

http://www.technimeasureuk.com/technimeasure.co.uk

nb, I’ll delete this once you have it as I don’t want the temporary url publicised

Thanks

[Steve Brown]

It would definitely appear that this is a bug when the logo size is changed, I believe it’s down to the top padding on the body tag but any help to solve this would be appreciated as it’s causing lots of problems with reliability and meaning we can’t launch our site until this is resolved

Regards

Steve

[D5 Creation]

Please input this into the Custom Code within Head Area Box of Innovation Options > General Options and let us know the result

<script type="text/javascript"> jQuery(window).load(function() { jQuery('.headerheight').css('marginTop', jQuery('#header').outerHeight(true) ); }); </script>

1 2 3

<script type="text/javascript"> jQuery(window).load(function() { jQuery('.headerheight').css('marginTop', jQuery('#header').outerHeight(true) ); }); </script>

[Steve Brown]

Brilliant, seems to have worked so far. Thanks for the help

[D5 Creation]

🙂

[Sveinung Tvedt]

I have been testing the same theme (lite version) and are planning on buying the extended version – but i find the same problem. In Safari for Mac the menu is on top of the sliding image, as is it in Chrome for PC. In Firefox for PC there is a grey area between the menu and the sliding image. Is this a bug in the theme?

[D5 Creation]

Theoretically that is nor a bug. That is a issue of loading JavaScript. Sometimes some hosts/plugins/cloudflare load the JavaScript later than the site load. We have changed the loading during the site loading. So, this problem should not exist. You can download and use the Extend Version which has the latest update.

[Steve Brown]

I can confirm that the above does fix it on the extend version. Although it’s not necessarily counted as a bug my opinion would be that this is certainly a fix that makes the theme more reliable and therefore fit for purpose.

I can definitely recommend the extend version!

Is the extend version now updated? Therefore am I best replacing the version I have with this and removing the custom header information? Are there any other changes with the updated version?

[D5 Creation]

No other changes, only the changes you pointed. Thank you for pointing that. You can update now or update during any next major version. Or you can simply update/overwrite the js/menu.js file.

[Author]

Posts