Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1244672

    Hey, I would like to change my header in mobile version and distribute the elements as I show in the image.
    I have tried what it says in this thread, but the logo loses its hyperlink and the distribution is not exact to what I looking for.

    And I would like to add the icon of “my account” ONLY in mobile, since in desktop view I have “sign up” and “login” set.

    header mobile

    Thanks.

    #1244811

    Hey davodoner,

    The logo link will work again with this code:

    
    @media only screen and (max-width: 479px) {
        .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
            width: 32%;
        }
    }
    

    To be able to add the account button next to the cart you’ll need to modify the function avia_woocommerce_cart_dropdown() in the files
    /config-woocommerce/config.php
    /config-woocommerce/config-356.php

    Best regards,
    Victoria

    #1244854

    Hey Victoria, that work perfectly thanks so much!

    Do you know that I have to add in /config-woocommerce/config.php and /config-woocommerce/config-356.php to be able to show the icon of “my account”?

    #1245406

    Can you help me Victoria?

    #1245727

    Hi,

    Thank you for the update.

    Have you tried adding the account icon or image as widget? We can then declare a css media query so that the icon is only visible on mobile view. Please check the following documentation for more info.

    // https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Aside from using a widget, we could also use the ava_main_header hook in the functions.php file to insert additional content or element inside the main header container.

    Example:

    add_action('ava_main_header', function() {
        echo "account icon";
    }, 10, 1);
    

    Best regards,
    Ismael

    #1245773

    Hi Ismael, thanks! I have managed to use the widget but not in the place I want, I would like to add the /uf007 icon next to the icon cart in mobile,

    Can you help me? Thanks!

    • This reply was modified 1 week, 3 days ago by  davodoner.
    #1246155

    Hi,

    Thank you for the update.

    We could use this css code to center align the logo, move the mobile menu and search icon to the left and keep the account button beside the cart icon on mobile view same as the screenshot above.

    @media only screen and (max-width: 767px) {
        .responsive #top .logo {
    	width: 100%;
        }
    
        .responsive .logo img {
    	left: 50%;
    	transform: translateX(-50%);
        }
    
        .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    	right: auto;
    	z-index: 102;
    	left: 0;
    	top: 0;
        }
    }

    Best regards,
    Ismael

    #1246245

    Thanks Ismael, but now the logo covers the menu and the magnifying glass in my mobile version,

    Do you know how I can correct it? I also can’t get an icon to show on my widget: /

    Sorry for the disturbances

    #1246367

    Now the search and the menu do not work on the mobile :/

    #1246692

    Hi,

    Sorry about that. We forgot to check the mobile menu and search icon after moving it to the left of the sidebar. To make them clickable again, please increase the z-index value from 102 to 200 or higher from this css code.

     .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    	right: auto;
    	z-index: 102;
    	left: 0;
    	top: 0;
    }
    

    This should be:

     .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    	right: auto;
    	z-index: 200;
    	left: 0;
    	top: 0;
        }
    

    We might have to increase the z-index of the widget and the cart icon as well.

    .responsive #top .cart_dropdown {
    	z-index: 200 !important;
    }
    
    .responsive #top #header .widget {
            z-index: 201 !important;
    }
    

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.