Archived topic
Account menu icon align
3 replies · Started by Rene Nekuda on January 19, 2022
Hello Generatepress, please, can you help me with align of my account menu icon?
What I did – hook a menu item like this:
<a href="https://www.renenekuda.cz/ucet/"><svg aria-hidden="true" height="1em" width="1em" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path></svg></a>
Result is here: https://renenekuda.d.pr/TVGMT0 (this menu icon is a working link, but it is a little bit above cart and search icon).
Can it be in a one line?
Thank you very much for your help!
Hi there,
first wrap your HTML in a Span tag like so:
<span class="menu-bar-item account-icon">
add your HTML in here
</span>This will make the icon occupy the same space as the other icons, making it more accessible and gives us a CSS Class to position the icon.
Now add this CSS:
.account-icon svg {
position: relative;
top: 0.125em;
}You may need to tweak that top value.
It is like a magic trick – thank you very much for your help!
Glad to be of help
