Docs

[Rue Nel]

Hello There,

The code should have work. Would you mind to provide the url with the info bar in it so that we could check it? There might be some invalid characters or something that invalidates the code.

Thank you in advance.

[SEVERO]

http://www.mad-daily.com

[Lely]

Hi There,

Thank you for the URL.
This part of your custom CSS is missing closing curly brace:
.entry-wrap{display:block;padding:30px;
Should be:

.entry-wrap{display:block;padding:30px;}

Please make sure that every open curly brace have corresponding closing curly brace.

[SEVERO]

Sorry, but that didn’t work.

[Joao]

Hi There,

Your info-bar is looking good, can you clarify what you are trying to achieve?

Also would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[SEVERO]

I’ll send through the details after hours as I can’t leave the Info Bar as it is when all our traffic is during the day.

But for now I’ve done a video of the 2 images stacked. The top one is the Info Bar with all this extra padding appearing when the browser window collapses and the one below with the image placed in the header which works withoutout the functionality of the Info Bar. http://screencast-o-matic.com/watch/cDX6YCj9lN

Also, going back to this video posted earlier you can see the extra padding appearing here too: http://screencast-o-matic.com/watch/cDX6hkjPzu

Thanks

[Rad]

Hi there,

They aren’t related to each other. This one http://screencast-o-matic.com/watch/cDX6YCj9lN has space created by positioning. Each one is independent, just because the other changes in height, the other top positioning will follow. It’s not, and that’s the limitation of fixed positioning, it will not respond in positioning.

Though, I like to see and check it. Please let us know when ready.

Thanks!

[SEVERO]

This reply has been marked as private.

[Rad]

Hi there,

There is static top margin within the body, it’s added upon page load but never updated on window’s resize. Is it added through custom code? Please add this code to Admin > Appearance > Customizer > Custom > Javascript.

jQuery( function($) {

$(window).resize( function(){

$('body').css({ 'margin-top' : $('#cp-cp_id_1b4a0').height() })

} );

} );

That should update the margin size upon resize.

Hope this helps.

[SEVERO]

Hi there, the resizing works well but the initial load leaves you with all this padding at the bottom and the padding is still there when the ad is closed.

[Rad]

Hi there,

Hmm, that would tricky since ads appear late than the page load. Hence, the height calculation is executed before the ads appear.

Please remove the code that I just provided. Instead, please add this CSS

body {
margin-top: 25% !important;
}

Then add this javascript too.

jQuery( function($){

$('.ib-close').on('click', function(){

setTimeout( function(){ $('body').attr('style', 'margin-top : 0 !important;'); }, 500 );

} );

} );

Hope this helps.

[SEVERO]

Soooooo close. Now it’s just that initial load of each page where you’re left with this huge padding above the advert for 3 seconds. Without that CSS code it works well, it’s just the resizing.

[Rad]

Hi there,

In that case, please change the javascript to this

jQuery( function($){

function set_ads_margin () {
setTimeout( function(){ $('body').attr('style', 'margin-top : 25% !important;');  }, 500);
}

$('.ib-close').on('click', function(){

setTimeout( function(){ $('body').attr('style', 'margin-top : 0 !important;'); }, 500 );

} );

$(document).ready( set_ads_margin );
$(window).load( set_ads_margin ).resize( set_ads_margin );

} );

The problem is, the ads loading time is varying. It will appear differently for different users. And it’s out of sync with the layout since it has its own positioning.

Thanks!

[SEVERO]

Hi there,

Thank you for this and yes it’s faster but it’s lost that nice smooth transition the Info Bar has – very jolty and doesn’t slide the page down, the gap just appears… I guess you can’t have both.

The way it loaded before was perfect but you lose ALL of that with the javascript code.

[SEVERO]

Just found another issue, when the ad is closed and you then collapse the browser the gap appears again.

[Author]

Posts