Tagged: 

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #497006
    #497141

    Hey Mario!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1024px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}

    then change 1024px to needed value

    Regards,
    Yigit

    #497193

    Hi Yigit, thanks for your support.

    that’s the way to hide the menu links.. but now we need to display again:

    – cart icon
    – my account icon (probably an icon similar to a facebook no profile picture)
    – search icon

    there’s a way to do it?

    thanks a lot Yigit!

    Cheers

    Mario

    #497509

    Hi!

    Can you please provide a screenshot? Use imgur or dropbox. You can modify the includes > helper-main-menu.php file if you want to add more elements inside the header.

    Cheers!
    Ismael

    #497544

    Hi Ismael,
    Thanks for your help but
    I really don’t know how to change that file.

    I give you the link to the header sample screenshot i would like to create.

    Look only the right side of the header.

    Here’s the link.

    Cheers!

    Mario

    #498165

    Hi!

    This kind of layout is a bit too different from the default theme setup so it will require more than a few modifications. First, try to display the cart icon on mobile with this in the Quick CSS field:

    @media only screen and (max-width: 1024px) {
    nav.main_menu {
        display: block;
    }
    
    .avia-menu {
        display: none;
    }
    
    .html_header_top #menu-item-shop.cart_dropdown {
        right: -80px;
    }
    }

    Add this in the functions.php file to add the account icon:

    // add account icon
    add_action('ava_after_main_menu', function() {
    	echo "<a class='mobile-account' href='#'><img src='ACCOUNT IMAGE URL'></a>";	
    });

    In the Quick CSS field, add this afterwards:

    @media only screen and (min-width: 1024x) {
    .mobile-account {
     display: none;
    }
    }

    The code above will hide the account icon on desktop view. You can use additional css properties to adjust the position and style of the icon. Note that you need to create your own icon image, use that url in place of the “ACCOUNT IMAGE URL”.

    Regards,
    Ismael

    #498204

    Good Morning Ismael!

    thanks for your excellent post!

    I’m gonna try now to modify the code you gave me, but i’ve just a question:

    – can i use the account icon on entypo-fontello already included on my theme, without use an URL?

    – is not possible show them above the header (where usually are social icons)?

    Thanks a lot!

    Mario

    • This reply was modified 2 years, 3 months ago by  Mario.
    #498778

    Hi!

    Replace the code in functions.php if you want to use the icon font:

    // add account icon
    add_action('ava_after_main_menu', function() {
    	echo '<a class="mobile-account" href="#"><span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-left  avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span></a>';	
    });

    I’m sorry but I don’t see why you have to add it above the header? According to the screenshot, you want to align the icons on a single file.

    Cheers!
    Ismael

    #498854

    Hi Ismael,

    thanks for your solution. As you can see on the screenshot the icon is under the logo..

    I would like to have it as the right image on the screenshot. is it possible? the best solution is put these icons on the space dedicated to social icons. cause i don’t use them on the mobile version on the top of the header.

    thanks a lot for your precious help!

    cheers

    Mario

    • This reply was modified 2 years, 3 months ago by  Mario.
    #500270

    Hi!

    I can’t see the the account icon on your website. Where is it? we need to inspect the element to be able to provide you some precise CSS code.

    Cheers!
    Andy

    #501309

    Ok Andy,

    i set again your code so you can check it out.

    I would like to have the my account icon at the right side of the header, above the menu button, replacing the social icon.

    Thanks a lot!

    Mario

    #501729

    Hi!

    I still can’t see any account icon. Where is it? at the right side of your header? but social icons are on the left side. So where exactly? A mockup would help a lot …

    Best regards,
    Andy

    #501733

    Hi Andy,

    on MOBILE VERSION AND ONLY ON MOBILE, the icon is under the logo, cyan color.
    please try again , i can see it perfectly.

    check the image attached please
    Thanks a lot!

    Mario

    • This reply was modified 2 years, 3 months ago by  Mario.
    #501938

    Hi!

    You modified the header layout again. I think you should plan the header design prior to posting inquiries. It will save you more time. Try to use this in the Quick CSS field to move the account image around:

    .mobile-account {
        position: absolute;
        top: -18px;
        right: 120px;
    }

    Regards,
    Ismael

    #502020

    Hello Ismael,

    ok now is on line with all the elements, that’s better! do you think is it possible fix it at the right side of the flag? on the top of the header , REPLACING SOCIAL ICONS. i would like to have it into the space dedicated to the social icons, not in the header with the menu. is it possible ?

    Thanks for your precious help!

    Cheers

    Mario

    • This reply was modified 2 years, 3 months ago by  Mario.
    #502497

    Hi!

    You can replace the action hook “ava_after_main_menu” with “avia_meta_header”. It will render the account icon inside the “top bar” instead of the “main menu container”.

    Cheers!
    Ismael

    #504087

    hi Ismael,

    thanks i did it but the icon disappear and no way to show it on the top bar.

    do i have to add some css code to position it?

    thanks for your help

    Mario

    #504474

    Hey!

    Please replace the code in the functions.php file with this:

    // add account icon
    add_action('avia_meta_header', function() {
    	echo '<a class="mobile-account" href="#"><span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-left  avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span></a>';	
    });

    You can use the same css selector to adjust the position of the icon.

    .mobile-account {
        position: absolute;
        top: 0;
        right: 120px;
    }

    Adjust the values.

    Best regards,
    Ismael

    #504791

    Hi Ismael,

    thanks but nothing works.

    it disappear completely.

    what’s wrong?

    #505870

    Hi!

    We modified the code in the functions.php file a bit. Please remove browser cache then reload the page: http://www.rewavelab.com/

    Regards,
    Ismael

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

You must be logged in to reply to this topic.