- This topic has 15 replies, 4 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
September 21, 2020 at 7:54 am #1452440Adrien
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 😉
September 21, 2020 at 8:06 am #1452462LeoStaffCustomer SupportHi 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.
September 22, 2020 at 2:09 am #1453460AdrienThanks Leo! You were right. Now we can see it on mobile but in a second row as show in the screenshot below.
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;
}September 22, 2020 at 3:25 am #1453547DavidStaffCustomer SupportHi there,
try this for your last CSS rule:
.account-link svg { width: 15px; vertical-align: middle; }
September 23, 2020 at 4:54 am #1455191AdrienThank 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.
September 23, 2020 at 8:11 am #1455562DavidStaffCustomer SupportIn this CSS:
.account-link { padding: 0 10px; order: 20; }
Try changing the order to
order: 2;
September 24, 2020 at 5:34 pm #1457772AdrienHello 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/y4ywv5kbI 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.
September 24, 2020 at 6:32 pm #1457783ElvinStaffCustomer SupportI 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.
September 24, 2020 at 7:15 pm #1457797AdrienThank you Elvin! Yes I did but now look on desktop 😉
September 24, 2020 at 7:20 pm #1457801ElvinStaffCustomer SupportWe 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; } }
September 24, 2020 at 7:53 pm #1457825AdrienThank 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 #eba63fAlso 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.
September 24, 2020 at 8:36 pm #1457860ElvinStaffCustomer SupportHow 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?
September 25, 2020 at 3:15 am #1458206AdrienThank you very much Elvin! Yes exactly put the “my account” icon in between search and the cart on desktop view like on mobile view
September 25, 2020 at 5:21 am #1458334DavidStaffCustomer SupportTo 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.
September 26, 2020 at 4:23 am #1459642AdrienThank you so much David for your support. I will leave it as is for the time being.
-
AuthorPosts
- You must be logged in to reply to this topic.