My account ICON

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

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

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

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

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

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

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

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