Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 4, 2019 at 1:03 pm #1062657
    Lin84

    Hallo,
    ist es möglich den Header zu wechseln bei Mobile Ansicht?

    • This topic was modified 5 years, 10 months ago by Lin84.
    February 4, 2019 at 4:49 pm #1062741
    Guenni007

    was ist mit diesem Rätselwort gemeint?
    Nein – im Ernst – etwas präziser.
    Was soll denn anders werden.

    February 5, 2019 at 8:28 am #1063057
    Rikard

    Hi,

    What exactly are you looking to change? Please try to be as specific as possible.

    Best regards,
    Rikard

    February 15, 2019 at 3:31 pm #1067473
    Lin84

    Ist es möglich 2 verschiedene Logos im Header einzubauen? Einmal für Desktop-Ansicht und einmal für die Ansicht auf Handy.
    Da es nicht allzuviele Einstellungsmöglichkeiten für den Header gibt, habe ich eine Datei erstellt die sich über die ganze Bildschirmbreite im Header erstreckt. Diese Datei habe ich als Logo eingestellt.
    Wenn man sich das aber jetzt auf einem Handy anschaut ist das nicht mehr sehr schön, deshalb würde ich für die Mobile Ansicht gerne das Logo austauschen.

    • This reply was modified 5 years, 10 months ago by Lin84.
    February 19, 2019 at 4:15 am #1068738
    Ismael

    Hi,

    Thanks for the update.

    This script will enable you to apply a different logo on mobile view.

    // change logo on mobile view
add_action('wp_footer', 'ava_mobile_logo');
function ava_mobile_logo() {
?>
<script>
(function($){
    var isMobile = false; 
    
    if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
        isMobile = true;
    }

    if( isMobile ) {
        $('.logo img').attr('src', 'MOBILE LOGO IMAGE URL HERE')
    }
})(jQuery);
</script>
<?php
}

    Just replace the placeholder with the actual image url.

    Best regards,
    Ismael

    February 21, 2019 at 12:26 pm #1069895
    Lin84

    Das hat leider nicht funktioniert.
    Ich habe das Plugin “TC Custom Java Script” installiert und dann wie oben angegeben das Script eingefügt und die URL vom neuen Logo eingesetzt.
    Doch das “alte” Logo bleibt sichtbar bei Desktop und Mobile.
    Oder habe ich was falsch gemacht?

    February 21, 2019 at 2:20 pm #1069947
    Guenni007

    Kardinal Frage: meinst du auch wirklich Mobile Endgeräte ? oder ist viel eher für kleine Screenbreiten gedacht?
    Wenn es für Mobile Endgeräte sein soll, dann solltest du auch da prüfen, und nicht nur das Browserfenster schmal ziehen.

    (Cardinal question: do you really mean mobile devices? or is it much more intended for small screen widths?
    If it should be for mobile devices, then you should also check there, and not just narrow the browser window.)

    Der Code von Ismael ist für das child-theme functions.php gedacht. ( und für Mobile Endgeräte gedacht)
    wobei ich mir mal einen etwas kürzeren Code notiert hatte:

    Es hängt jetzt aber auch viel von deiner Seite ab. Daher wäre ein livelink sehr gut.
    Denn wenn du zB die transparent header Variante wählst, dann ist das Logo ein anderes.

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

    Wenn du es nur für schmale Screenbreiten brauchst ( ist dann ja auch bei Mobilen Endgeräten aktiv) wäre das hier ein Code:
    ( die 480px sind hier mal als Grenze gesetzt – kannst Du aber anpassen)

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

    PS @ismael : there is this navigator.userAgent query in avia.js directly at the beginning. Yours looks very extensive; could we replace it with your detailed one in the combination with && 'ontouchstart' in document.documentElement ?

    February 21, 2019 at 3:34 pm #1069972
    Lin84

    Ja ich hatte es auf Mobilen Endgeräten getestet, aber wie shcon erwähnt ich habe das Script in ein zusätzliches Skript Plugin eingepflegt und nicht in die functions.php.
    Vielen Dank jetzt klappt es.
    Eine Frage noch, kann ich die die Distanz, in der Mobilen Ansicht, zwischen Logo und Inhalt noch verringern.
    Ich habe eine Header Höhe von 200px angegeben. In der Desktop Ansicht sieht das auch alles gut aus, nur in der Mobilen Ansicht ist jetzt eine große Distanz zwischen Logo und Inhalt.

    February 21, 2019 at 10:02 pm #1070117
    Guenni007

    Da musst du dann auf die Mods hier warten, da ich deinen Link ( wahrscheinlich im private content ) nicht sehe kann ich da schlecht Tips zu geben.

    February 25, 2019 at 3:41 am #1071102
    Ismael

    Hi,


    @Lin84    : Use this css code to remove the default menu on mobile view.

    media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    display: none;
}
}


    @Guenni007    : We never really had anyone reporting issue with the mobile detection script, so I don’t think changing it would be necessary.

    Best regards,
    Ismael

    February 25, 2019 at 11:12 am #1071221
    Lin84

    Das hat leider nichts geändert.

    February 28, 2019 at 5:09 am #1072471
    Ismael

    Hi,

    The css files are compressed or merged, so the recent modification is not in use. Please toggle the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    March 11, 2019 at 12:01 pm #1077286
    Lin84

    Danke, jetzt hat es funktioniert.

    • This reply was modified 5 years, 9 months ago by Lin84.
    March 11, 2019 at 3:34 pm #1077381
    Ismael

    Hi,

    Great! Glad we could help.

    Vielen Dank, dass Sie Enfold verwenden.

    LG,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Enfold Header wechseln in Mobile Ansicht’ is closed to new replies.