Different header file on mobile? - Support | Kriesi.at

Viewing 24 posts - 1 through 24 (of 24 total)

Author

Posts
January 3, 2018 at 8:19 pm #892912

stacey_pritchett
Participant

Hi,

My client wanted a custom header graphic in their header, however, it looks terrible on a mobile device. I would be happy to have just the logo display on the mobile device. or to scale the header graphic so it looks better…

Also – second problem is customizing the blog posts on the home page. I would like to display the title without the category and use the H4 heading as the title font.

Any help would be appreciated. Thanks!

January 4, 2018 at 6:38 pm #893314
Victoria
Inactive Moderator
Hey stacey_pritchett,

Well, you can prepare a different smaller image for mobile and show it on smaller size screens.

Below is the code for the blog post titles.
```
.html_modern-blog .avia-content-slider .slide-entry-title {
    font-size: 1.4em;
    text-transform: none;
}
.html_modern-blog #top.home .post-entry .blog-categories {
  display: none;
}
```
If you need further assistance please let us know.
Best regards,
Victoria
January 4, 2018 at 6:47 pm #893325

stacey_pritchett
Participant

Thanks so much! Worked perfectly. Where do I change the Blog Title font? I want to make it a H4 heading.

Also – can you please expand on how I would prepare a smaller image for mobile? Sorry – really don’t code so is there an easy way to do this?

January 5, 2018 at 7:10 pm #893807

Victoria
Inactive Moderator

Hi stacey_pritchett,

Preparing an image is a designers’ job, not the coders’. What do you mean change to h4, use a different tag or use a different font for that heading?

Best regards,
Victoria

January 7, 2018 at 12:10 am #894264

stacey_pritchett
Participant

Hi Victoria,

Thanks so much. Resolved that issue.

Still however having an issue with a new logo/header file on mobile devices. Added this code:

add_filter(‘avf_logo’,’av_change_logo’);
function av_change_logo($logo)
{
if(wp_is_mobile() )
{
$logo = “http://844.f23.myftpupload.com/wp-content/uploads/2018/01/Innovation-Core_Header_sm.jpg”;
}
return $logo;
}

to both the quick css – which didn’t work – and then to the functions.php file as indicated on one of the help topics – which also didn’t work. When I added it to the function.php the new logo appears on top of the existing header file/logo. Below is all the code I have in quick css. (Private content)

The problem is that I have a header graphic (at my client’s instance) so the new logo file is appearing on top of that graphic. I need to replace the header graphic on all mobile devices..

Thanks for you help!

January 8, 2018 at 3:27 am #894554

Ismael
Moderator

Hi,

Please remove the code from the Quick CSS field. It has to be added in the functions.php file only.

Best regards,
Ismael

January 8, 2018 at 4:07 am #894566

stacey_pritchett
Participant

Hi,

Please see above- I already added it to the functions.php file and it didn’t work. Full explaination above.

Please help.

Thanks!

January 8, 2018 at 11:57 pm #894968

Basilis
Inactive Moderator

Hi,

Can you provide us with backend detaiils?

Best regards,
Basilis

January 8, 2018 at 11:58 pm #894970
stacey_pritchett
Participant
Thanks. It was provided in the initial post.
- This reply was modified 6 years, 11 months ago by stacey_pritchett.
January 9, 2018 at 5:18 am #895082

Ismael
Moderator

Hi,

Thank you for the info. I edited the functions.php file but I can’t find the filter. However, I did find the code in the Quick CSS field but it’s invalid because it’s not a css code. We need to know this because we may break the site if we add a duplicate function. Where did you add it?

Best regards,
Ismael

January 9, 2018 at 3:01 pm #895260

stacey_pritchett
Participant

Hi Ismael,

I added the code and tested it. When it didn’t work, I removed it. So – there is no duplicate code in the functions.php file. I did leave it in the Quick CSS field because it did nothing. I can remove that.

Please add the code in the functions.php file (and please let me know what code you added) so I can test it to make sure it works.

Thanks so much!!!

January 10, 2018 at 11:05 am #895598
Ismael
Moderator
Hi,

We encountered an error when we tried to add the code. Please post the FTP login details in the private field so that we can add it. Or just copy the following code directly from this forum to the site’s functions.php file.
```
add_filter('avf_logo','av_change_logo_url');
function av_change_logo_url($url)
{
    if( wp_is_mobile() )
    {
        $url = "http://844.f23.myftpupload.com/wp-content/uploads/2018/01/Innovation-Core_Header_sm.jpg";
    }
    return $url; 
}
```
IMPORTANT: Please note that the filter will only affect actual mobile devices. You won’t see the changes if you’re just resizing a desktop browser.

Best regards,
Ismael
January 10, 2018 at 5:04 pm #895737

stacey_pritchett
Participant

Thanks Ismael. Added that to the functions page – that didn’t work. See screen shot – http://844.f23.myftpupload.com/wp-content/uploads/2018/01/phone-logo.jpg

We need to replace the header file on mobile devices -not the logo file. Any help would be greatly appreciated.

Thanks!

January 11, 2018 at 7:54 am #896015
Ismael
Moderator
Hey!

I see. I just noticed that the logo was added as header background. Please remove the filter then add the following css code in the Quick CSS field.
```
@media only screen and (max-width: 768px) {
  /* Add your Mobile Styles here */
  .header_color .header_bg {
    background: #023794 url('http://844.f23.myftpupload.com/wp-content/uploads/2018/01/Innovation-Core_Header_sm.jpg') top left no-repeat scroll;
  }
}
```
Best regards,
Ismael
January 11, 2018 at 4:27 pm #896189

stacey_pritchett
Participant

YES! It worked. Thank you so much for your patience and perseverance! Greatly appreciated!

January 12, 2018 at 8:17 am #896453

Rikard
Keymaster

Hi,

Great, I’m glad Ismael could help you out :-)

Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

January 12, 2018 at 6:24 pm #896645

stacey_pritchett
Participant

Hi there,

After speaking with my client – just one more thing. She wants the header file to link back to the home page. (On mobile and desktop.) Any help would be appreciated.

Thanks!

January 13, 2018 at 5:15 am #896821
Ismael
Moderator
Hi,

Alright. Please use this code in the Quick CSS field.
```
.av-logo-container {
    cursor: pointer;
}
```
And this script in the functions.php file.
```
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	$('.av-logo-container').on('click', function() {
		window.location.href = 'http//www.mysite.com';
	});
})(jQuery);
</script>
<?php
}
```
Adjust the url “http//www.mysite.com” to the site’s home page url.

Best regards,
Ismael
January 15, 2018 at 1:28 am #897280

stacey_pritchett
Participant

Hi Ismael,

I keep getting an error message when I try to update the functions. php file. Is there a simple way to do this via the Quick CSS or can I use this code in the custom css file? Please advise.

Thanks!

January 15, 2018 at 4:23 am #897340

Ismael
Moderator

Hi,

Please copy the code directly from the forum, not from your email. Add it at the very bottom of the functions.php file. Unfortunately, you can’t solve this with css.

Best regards,
Ismael

January 17, 2018 at 11:40 pm #898770

stacey_pritchett
Participant

Hi Ismael,

This didn’t work. The redirect gave me an error page:

http://sei-innovation.com/wp-content/uploads/2018/01/redirect.jpg

It was the page url and then the site url – please see above screen shot.

Thanks! (I removed the code since the site is now live.)

January 19, 2018 at 12:25 am #899371

Basilis
Inactive Moderator

Hi,

If you look at your URL on top, the link is wrong, please add https://www before

Best regards,
Basilis

January 23, 2018 at 10:16 pm #901716

stacey_pritchett
Participant

This has been fixed. Please close this topic

January 24, 2018 at 2:57 am #901815

Nikko
Inactive Moderator

Hi,

Glad to hear that it’s fixed. Thanks for using Enfold :)

Best regards,
Nikko
Author

Posts

Viewing 24 posts - 1 through 24 (of 24 total)

The topic ‘Different header file on mobile?’ is closed to new replies.