[Resolved] Icon replacing My account page on nav bar (niche site)

Home Forums Support [Resolved] Icon replacing My account page on nav bar (niche site)

Home Forums Support Icon replacing My account page on nav bar (niche site)

  • This topic has 15 replies, 4 voices, and was last updated 1 year ago by David.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1452440
    Adrien

    Hello Team,

    I have followed the exact guide to replace my account with an icon. I did this using the niche store demo side.

    However, I face 3 little issues and would need your help if possible:

    1/ It does not show on mobile.
    2/ I’d like if its not too complicated to have my account in between the search icon and the cart.
    3/ If you see my icon, it not really aligned with the other.

    Thanks a lot for your help.

    I have disabled my cache this time 😉

    #1452462
    Leo
    Staff
    Customer Support

    Hi there,

    1. In order for the icon to show on mobile, you need to add it again in the generate_inside_mobile_header hook:
    https://docs.generatepress.com/article/hooks-element-overview/

    2. How are you adding it currently? Can you try adding it to the generate_menu_bar_items first?

    3. We can take a look at this once #2 is resolved.

    #1453460
    Adrien

    Thanks Leo! You were right. Now we can see it on mobile but in a second row as show in the screenshot below.

    https://tinyurl.com/y3xz3xwg

    Here is the CSS i’ve copies from David in another ticket:

    .inside-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .account-link {
    padding: 0 10px;
    order: 20;
    }
    .account-link svg {
    width: 15px;
    }

    #1453547
    David
    Staff
    Customer Support

    Hi there,

    try this for your last CSS rule:

    .account-link svg {
        width: 15px;
        vertical-align: middle;
    }
    #1455191
    Adrien

    Thank you David! Unfortunately it didn’t do the trick…

    Im still having the menu icon on another line on mobile and would like to place this icon in between the search icon and the cart.

    Here is a screenshot of the issue on mobile: https://tinyurl.com/y6msobhs

    Appreciate your help.

    #1455562
    David
    Staff
    Customer Support

    In this CSS:

    .account-link {
        padding: 0 10px;
        order: 20;
    }

    Try changing the order to order: 2;

    #1457772
    Adrien

    Hello David,

    I’ve tried everything. I’ve even rebuilt my whole store from scratch for the past 8 hours.
    Getting back on the stable GP has solved a few of my issues especially the add to cart bar on scroll but I’m still left with the “My account” main menu icon which looks like this on mobile: https://tinyurl.com/y4ywv5kb

    I can’t figure out how to Have it aligned on the same row as the other icons on mobile.
    I can’t figure out how to have the My account icon in back like the Basket/cart.

    I hope you can guide me. I’ve tried all I could. Thank you very much in advance.

    #1457783
    Elvin
    Staff
    Customer Support

    I can’t figure out how to Have it aligned on the same row as the other icons on mobile.
    I can’t figure out how to have the My account icon in back like the Basket/cart.

    Have you tried David’s CSS code? This is its effect. – https://share.getcloudapp.com/NQu1k8wE

    If applied right, it should solve both issues.

    A wise man once said:
    "Have you cleared your cache?"

    #1457797
    Adrien

    Thank you Elvin! Yes I did but now look on desktop 😉

    https://tinyurl.com/y65gt6oz

    #1457801
    Elvin
    Staff
    Customer Support

    We can definitely do something about that.

    Let’s wrap it w/ a media rule so it only applies on in mobile. 🙂

    So basically, we can have rules for different viewports.

    
    /* this is for desktop ordering */
    .account-link {
        padding: 0 10px;
        order: 20;
    }
    
    /* this is for mobile ordering */
    @media (max-width:768px){
    .account-link {
        padding: 0 10px;
        order: 2;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1457825
    Adrien

    Thank you so much Elvin! Can you still help me?

    How can I have this my account icon acting like the rest of the icons (cart and search)?
    You see when I hover the cart or search icon they have this color: #eba63f
    When I am on the cart page, the icon is then fixed in #eba63f

    Also Id like this my account icon to be in between the search icon and the cart, as it is on mobile.

    I wish this icon was coming out of the box in all GP themes. I guess its quite common nowadays on all Woocommerce store.

    Appreciate your guidance.

    #1457860
    Elvin
    Staff
    Customer Support

    How can I have this my account icon acting like the rest of the icons (cart and search)?

    To clarify, you want your “my account” icon to have a different hover and “visited” color values?

    If so, you can try these CSS codes.

    For :visited:

    .account-link:visited{
    color: #eba63f;
    }

    As for :hover, you can easily do that by adding this css.

    .account-link:hover{
    color: #eba63f;
    }

    Also Id like this my account icon to be in between the search icon and the cart, as it is on mobile.

    I’m not exactly sure what you mean by this. Do you mean, put the “my account” icon in between search and the cart on desktop view like on mobile view?

    A wise man once said:
    "Have you cleared your cache?"

    #1458206
    Adrien

    Thank you very much Elvin! Yes exactly put the “my account” icon in between search and the cart on desktop view like on mobile view

    #1458334
    David
    Staff
    Customer Support

    To move it between the two icons on desktop means you will have to add the icon as a Menu Item NOT using a Hook. Once its placed there we can hide it from the mobile menu and position it.

    #1459642
    Adrien

    Thank you so much David for your support. I will leave it as is for the time being.

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