Banner above header problem on tablets only - Support | Kriesi.at

Viewing 30 posts - 1 through 30 (of 35 total)

1 2 →

Author

Posts
September 4, 2016 at 6:27 pm #681827

aph80
Participant

Hi,
I integrated a banner on top of my site. It is supposed to stick there/hide when scrolling down. Therefore I used the code:

.header-scrolled {
top: 0;
}

It works perfectly on desktop and mobile. However on tablets it looks really bad. The banner goes away but there is just white space instead. It can´t be simulated by adjusting the screen size on desktop. But on several tablets I tested, there´s always the same problem. Please check my site eiweisspulver-test.com to see what it looks like.

Cheers!

Arkadi

September 6, 2016 at 4:51 pm #682727

Yigit
Keymaster

Hey aph80,

Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Yigit

September 6, 2016 at 9:12 pm #682847

aph80
Participant

Hi Yigit,

it´s http://www.eiweisspulver-test.com/. The banner is shown on every page.

Best regards,
Arkadi

September 9, 2016 at 3:40 pm #684215

Yigit
Keymaster

Hi,

Sorry for the late reply!
I cannot reproduce the issue on my end. I will ask my teammates to check your website on an actual tablet. Please kindly wait to hear from them.

Best regards,
Yigit

September 10, 2016 at 8:04 pm #684555

Vinay
Inactive Moderator

Hi,
I checked your site on my desktop and laptop on chrome and IE but there is no banner while scrolling or not scrolled. Please remove any code you added to it and provide us a mockup of what exactly you are trying to achieve. You can upload the mockup to imgur.com.

Best regards,
Vinay

September 12, 2016 at 12:42 am #684831

aph80
Participant

Hi Vinay,
are you using adblock? There certainly is a banner on the page. On desktop and laptop it goes away while scrolling. That´s all good. The problem only appears on tablets.
Best regards,
Arkadi

September 14, 2016 at 11:47 am #686288

aph80
Participant

Anyone willing to help?

September 14, 2016 at 4:51 pm #686490

Yigit
Keymaster

Hi,

I asked Vinay to check the thread once again. Unfortunately, i do not have a tablet and cannot reproduce the issue as i mentioned before. Please kindly wait to hear from him.

Best regards,
Yigit

September 14, 2016 at 8:15 pm #686583

aph80
Participant

Thank you Yigit!

September 15, 2016 at 9:21 pm #687110
Vinay
Inactive Moderator
Hi,

Sorry for the delay and thank you for elaborating the issue. Yes adblock was on.
I checked on an android tablet and as mentioned the white space appears in landscape mode only. It worked fine on portrait mode.

I’m unable to reproduce the issue on desktop to troubleshoot.

1. Please remove all custom CSS that is added to modify the header.
2. Disable the caching plugin.
3. Add the code one block at a time and refresh the page on the tab.

You will come to know which custom code is causing the issue, we can help you with it.

Let us know if this helps.

Best regards,
Vinay
- This reply was modified 8 years, 3 months ago by Vinay.
September 30, 2016 at 1:38 pm #693711
aph80
Participant
Hi Vinay,
thank you for your response. The only custom CSS affecting the header is
```
.header-scrolled {
    top: 0;
}
```
I reckon this code somehow doesn’t work correctly on tablets. Here an excerpt from my header.php where I included the banner image in case there’s something wrong with this. I tried it on different positions already.
```
wp_head();

?>

</head>

<body id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank." ".$sidebar_styling); avia_markup_helper(array('context' => 'body')); ?>>

<div align="center">
<a href="https://www.bodylab24.de/" rel="nofollow"><img src="http://www.eiweisspulver-test.com/Bodylab728x90.gif" alt="Anzeige" /></a>
</div>

	<?php 
		
	if("av-preloader-active av-preloader-enabled" === $preloader)
	{
		echo avia_preload_screen(); 
	}
		
	?>

	<div id='wrap_all'>

	<?php 
	if(!$blank) //blank templates dont display header nor footer
	{ 
		 //fetch the template file that holds the main menu, located in includes/helper-menu-main.php
         get_template_part( 'includes/helper', 'main-menu' );

	} ?>
		
	<div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>

	<?php 
		
		if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
		do_action('ava_after_main_container'); 
		
	?>
```
Any ideas?
October 4, 2016 at 4:50 am #694849
Ismael
Moderator
Hi,

I can’t really reproduce the issue on my end but maybe this will help. Replace the ad container with the following.
```
<div class="container_wrap" align="center" style="border-top: none;">
<a href="https://www.bodylab24.de/" rel="nofollow"><img src="http://www.eiweisspulver-test.com/Bodylab728x90.gif" alt="Anzeige"></a></div>
```
And what is the actual model of your tablet? I’m asking because some mobile device have an issue with gif formatted image.

Best regards,
Ismael
October 4, 2016 at 12:58 pm #695004

aph80
Participant

Hi,

thank you. Unfortunately that didn’t change anything. I’ve seen the error on different ipads, Amazon Fire and I think Samsung Galaxy, as well. So it’s not limited to one kind of tablet. On mobile phones there is no problem. There we don’t have the floating navigation bar, though.

Best regards

Arkadi

October 7, 2016 at 6:32 am #696293
Ismael
Moderator
Hi!

Would you consider adding the banner below the header on tablet view? Please try this in the functions.php file.
```
add_action('ava_after_main_container', function() {
	if ( wp_is_mobile() ) {
		echo '<div align="center"><a href="https://www.bodylab24.de/" rel="nofollow"><img src="http://www.eiweisspulver-test.com/Bodylab728x90.gif" alt="Anzeige" /></a></div>';
	}	
});
```
Best regards,
Ismael
October 12, 2016 at 4:10 pm #698365

aph80
Participant

Hi Ismael!

Thank you for the idea but this would be a big compromise that I don’t want to make. The code affects mobile as well, right?

This seems to be a bug one should be able to remove I figure.. How do other people integrate banners above the header?

Best regards

Arkadi

October 12, 2016 at 4:13 pm #698369

Yigit
Keymaster

Hey!

They usually use a child theme – http://kriesi.at/documentation/enfold/using-a-child-theme/ and modify header.php file :)

Cheers!
Yigit

October 12, 2016 at 5:46 pm #698439

aph80
Participant

Hey,

I just tried to switch to a child theme. The import function doesn’t work entirely, so the design get’s messed up. But how does using a child theme change this issue anyway? If we know how header.php has to be modified, we can just do it with the regular theme, right?

Cheers!

Arkadi

October 12, 2016 at 7:59 pm #698504

Yigit
Keymaster

Hi,

Yes, however when you update the theme, those changes will be overwritten and you are going to need to apply each time you update the theme. But if you use a child theme and copy header.php file to your child theme and apply the change there once, changes will not be overwritten no matter how many times you update the parent theme :)

Best regards,
Yigit

October 12, 2016 at 9:08 pm #698525

aph80
Participant

Yeah I apply my changes to header.php and functions.php after each update. The child theme solution would be a good thing.

However the banner problem still persists. If anyone knows what to do, please let me know. Would be much appreciated <3

October 17, 2016 at 1:38 pm #699973

Andy
Inactive Moderator

Hi,

for using a child theme check out this: http://kriesi.at/documentation/enfold/using-a-child-theme/

I can’t the banner problem you’re talking about on none of your website. Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Andy

October 17, 2016 at 9:42 pm #700267

aph80
Participant

Hi Andy,

thank you for looking into this. You find the link in my first and third post of this thread (eiweisspulver-test.com). Some remarks in case you haven´t read everything:

1. The banner appears on every single page of the website above the header.
2. If you are using adblock you won’t see the banner.
3. The problem only appears on tablet devices. On Ipads in any mode and as Vinay stated, on Android only in landscape mode.

Thanks again and I hope you can help.

Best regards

Arkadi

October 19, 2016 at 11:41 am #701157

Andy
Inactive Moderator

Hi,

banner looks good to me on iPad screensize:
Landscape: http://i.imgur.com/56ics7o.png
Portrait: http://i.imgur.com/CjYnjTW.png

So could you fix it?

Best regards,
Andy

October 23, 2016 at 9:12 pm #703061

aph80
Participant

Hi Andy,

on the pictures you posted there is no banner at all. Seems like you’re using adblock. Above the blue bar on the top there should be a Bodylab24 banner. When you then scroll down the error becomes apparent. Couldn’t fix it yet.

Best regards

Arkadi

October 26, 2016 at 8:22 am #704159

Ismael
Moderator

Hi,

However the banner problem still persists. If anyone knows what to do, please let me know. Would be much appreciated <3

Have you tried using a non-gif format file or image?

And what is the actual model of your tablet? I’m asking because some mobile device have an issue with gif formatted image.

Best regards,
Ismael

November 9, 2016 at 7:48 pm #710415

aph80
Participant

Hi Ismael,

with .png images there is the same problem. And it occurs on all tablet models I tried so far: Ipads, Samsung Galaxy, Amazon Fire, …

Best regards

Arkadi

November 11, 2016 at 12:24 pm #711096
Ismael
Moderator
Hey!

Thank you for the update. We’re not really sure why it’s not working on those devices. Maybe, defining the height of the container will help.
```
body > .container_wrap {
    height: 96px;
}
```
Cheers!
Ismael
November 13, 2016 at 8:01 pm #711677

aph80
Participant

Thank you for the idea! Unfortunately it didn’t help. Any other suggestions?

November 14, 2016 at 1:20 pm #711928

Andy
Inactive Moderator

Hi,

now your banner is visisble to me and it looks good to me on iPad:

View post on imgur.com

View post on imgur.com

Best regards,
Andy

November 14, 2016 at 3:15 pm #711996

aph80
Participant

Hi Andy,

the problem is not about visibility of the banner. If you scroll down the page you will see an error. Please read the thread for more information.

Best regards

Arkadi

November 17, 2016 at 4:59 am #713345

Ismael
Moderator

Hi,

the problem is not about visibility of the banner. If you scroll down the page you will see an error. Please read the thread for more information.

I thought that the issue is that the banner is not visible on iPad. What error are you referring to?

Best regards,
Ismael
Author

Posts

Viewing 30 posts - 1 through 30 (of 35 total)

1 2 →

The topic ‘Banner above header problem on tablets only’ is closed to new replies.