Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 7, 2018 at 4:41 pm #1042103
    OKEIwebbureau

    Hi support,

    I have checked the page / documentation here: https://kriesi.at/documentation/enfold/logo/ but couldn’t find the right solution.

    I am looking for:

    One logo on screens >=1025 and another logo on screens <=1024.

    Thanks :-)

    /OKEI

    December 7, 2018 at 7:13 pm #1042163
    Jordan Shannon

    Hey OKEI,

    Please provide a link to the site/page in question so we can look into this further.

    Best regards,
    Jordan Shannon

    December 8, 2018 at 8:23 am #1042384
    OKEIwebbureau

    Please take a look at http://saratorvallbach.com/home/.

    The logo isn’t looking good on mobile/tablets below screen width 1024px.

    Thanks :-)

    /OKEI

    December 10, 2018 at 6:41 pm #1043252
    Jordan Shannon

    Hi,

    Thanks for the link. Are you looking to just reduce the size of the logo on smaller screens so it doesn’t run into the search and menu?

    Best regards,
    Jordan Shannon

    December 10, 2018 at 7:12 pm #1043268
    OKEIwebbureau

    Hi support,

    On mobile it would be nice to have the search icon removed. The logo works pretty good there.

    On tablets (up to 1024px screens) it would be nice to have the logo in the middle of the header in stead of aligned at the top.

    Thanks.

    /OKEI

    December 10, 2018 at 10:06 pm #1043393
    Jordan Shannon

    Hi,

    Thanks for clarifying. Add this to quick css:

    @media only screen and (max-width: 767px)  {
#menu-item-search{
display:none!important;
}}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
.logo{
margin-top:30px!important;
}}

    Best regards,
    Jordan Shannon

    December 10, 2018 at 11:51 pm #1043432
    Guenni007

    to change the logo on screen width dependencies you can do it via child-theme functions.php:

    function change_logo_for_smaller_screens(){
?>
<script>
(function($){
	if ($(window).width() < 1025) {
		$(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png");}
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'change_logo_for_smaller_screens');

    if you only want it on load function (not on resize) you can set the window.load function to it

    Edit : oh sorry i misunderstood your question i see now

    • This reply was modified 5 years, 11 months ago by Guenni007.
    December 11, 2018 at 12:22 am #1043438
    Jordan Shannon

    Hey Guenter,

    Thanks for the help!

    Best regards,
    Jordan Shannon

    December 11, 2018 at 12:18 pm #1043711
    OKEIwebbureau

    Thanks to the both of you ;-)

    @Shannon – I tried your solution. The one with the search icon worked, the other didn’t.

    @Guenter     – I will give your solution a try, if I don’t succeed with the one from Shannon.

    /OKEI

    December 11, 2018 at 3:42 pm #1043788
    Jordan Shannon

    Hi,

    Please add the code I gave you to the very top of quick css so it runs first. Also clear the cache a few times over. The other code was simply to move the logo lower on tablets.

    Best regards,
    Jordan Shannon

    December 12, 2018 at 11:18 am #1044254
    OKEIwebbureau

    Now I works :-)

    So the top of quick css rules more than the lower part?

    /OKEI

    December 12, 2018 at 8:39 pm #1044475
    Jordan Shannon

    Hi,

    Great! I’m glad that worked. In some situations yes, but also if you have some css that may be formed incorrectly below it the desired code may not run.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.