Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 4, 2021 at 12:23 am #1303898
    andotek

    Hi Team,

    My graphic designer has redesigned the logos / icons for
    Add to Cart
    Search
    Account (Person Shape)

    I would like to position these three icons on the right side of the main menu header container.
    I would like the Add to Cart button to function as per the default -> Upon hover it shows what is in the cart.
    I would like the search button to still be ajax enabled on click

    How do I best approach this?
    Previsouly I have created a header widget to get a generic button positioned on the right side of the main menu however this is a little more complex as I would like to still have the default behaviour happen as per the default theme options (search and add to cart)
    // Header widget area

    add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }

    How would you approach a problem like this?

    June 4, 2021 at 12:24 am #1303899
    andotek
    This reply has been marked as private.
    June 8, 2021 at 5:51 pm #1304725
    Yigit

    Hi,

    Sorry for the late reply!

    Could you please share the icons and post a screenshot showing the changes you would like to make? Are they iconfonts?

    Best regards,
    Yigit

    June 9, 2021 at 6:15 am #1304791
    andotek

    Hi Yigit,

    Thanks so much for replying.

    Two things I’m trying to achieve here

    1) Our custom icons to be positioned on the right side of the menu header as per below screen shot. I’ve uploaded the icons as an icon pack
    https://dev.powerof4.com.au/wp-content/uploads/2021/06/Custom-Icons-On-Main-Menu.jpg

    Icons are located here (using a custom import font pack called PO4)

    Cleaning Matrix

    2) When the screen is resized (for tablet and mobile) we would like the main logo icon to move to the centre and the burger icon to appear on the far left as per screen shot below
    https://dev.powerof4.com.au/wp-content/uploads/2021/06/Burger-Menu-On-Left-Side.jpg

    Thanking you in advance for your help here :)

    Andrew

    June 9, 2021 at 12:14 pm #1304848
    Yigit

    Hi Andrew,

    I added new menu item for account to your menu, enabled search icon in menu and added following code to functions.php file of your child theme

    
add_filter('avf_default_icons','avia_replace_search_icon', 10, 1);
function avia_replace_search_icon($icons)
{
$icons['cart']	 = array( 'font' =>'po4', 'icon' => 'ue802');
$icons['search']	 = array( 'font' =>'po4', 'icon' => 'ue800');
return $icons;
}

    then added following code to bottom of Style.css file of your child theme

    
#top .cart_dropdown {
    border: none;
}
@media only screen and (min-width: 990px){
#menu-item-shop.cart_dropdown,
#menu-item-294, 
#menu-item-search {
    float: right;
}
#top .av-main-nav-wrap {
    width: 95%;
}
}
#menu-item-shop .cart_dropdown_link{
	padding: 0 15px 0 0;
}
.html_cart_at_menu.html_header_searchicon .menu-item-search-dropdown {
    padding-right: 0;
}
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item#menu-item-294 {
    display: block;
}
@media only screen and (max-width: 767px){
.responsive.html_cart_at_menu #top .main_menu .menu > li:last-child {
    margin-right: 45px;
}
}
@media only screen and (max-width: 1158px) and (min-width: 990px){
#top .av-main-nav-wrap {
    width: 93%;
}
}

    Please review your website :)

    Best regards,
    Yigit

    June 9, 2021 at 2:25 pm #1304876
    andotek

    Hi Yigit,

    Thanks for this. I have tweaked it a little to get it right.
    What this has done though is modified the mobile menu. Are you able to reposition the logo so that the logo becomes centred on mobile view and burger menu is moved to the far left as per the screen shot below?
    https://dev.powerof4.com.au/wp-content/uploads/2021/06/Mobile-Menu.jpg

    Also when the width of the screen is reduced the shopping cart drops out of line? Can that be fixed also? See screen shot.
    https://dev.powerof4.com.au/wp-content/uploads/2021/06/Screenshot.jpg

    Thanking you in advanced.

    • This reply was modified 4 years, 1 month ago by andotek.
    June 10, 2021 at 3:55 pm #1305103
    Yigit

    Hi,

    1- I further adjusted the code to replace the header layout on mobile.

    2- Values needed adjusting after you increased the size of the icons. I adjusted it.

    Please review your website :)

    Best regards,
    Yigit

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