ICON ALIGN IN THE MENU-BUTTON?
Auteur : Sinisa B.
Visité 1409,
Followers 1,
Partagé 0
How to center an icon + text in the MENU BUTTON?
I have a simple icon in the login menu-button (see pic below) - but now the menu-button is not looking symmetrical...
This could be done easily in the HOVER BUTTON object - but it seems that it cannot be done in the MENU BUTTON?
Please note:
the icon is inserted in only one menu-button - other menu buttons have no icons (text align: center).
Thank you in advance for any assistance!
Posté le
Auteur
Anyone?
Hello Sinisa
If I'm not mistaken, it seems to me that the text is already aligned in the center
What cannot be aligned in the center is the Icon. The icon is considered a separate element from the text of the button and it will mandatorily be aligned on the left.
At the moment, I am afraid such a result could only be achieved with custom code
I'll leave this topic open just in case other users wish to join the conversation and eventually help you out with this
Thank you
Stefano
... LINK...?...
.
Auteur
@ Stefano
Thx for the feedback!
This issue is nicely solved in the HOVER BUTTON object which contains an icon (it aligns the icon and text as it should).
Could the same "fix" be applied with the MENU BUTTON in some future update?
This issue seems irrelevant as long as you do not receive the e-mail from the client requesting symmetry of all the elements in the MENU... and then this "irrelevant issue" starts to be highly relevant - because the client will not have the understanding for my excuses...
Please guys fix this - thank you!
Hey Sinisa,
here could help you
http://wsx5demo.afsoftware.fr/button_icon.html
https://wsx5.afsoftware.fr
Auteur
@ KolAsim
Thank you!
Here is the link (you can see the issue in the LOGIN button):
https://www.izradawebshopa.eu/demoshop_eng/
Auteur
@ Axel
Yeah, right...
Icon alignment in the main MENU BUTTON is something that any web design tool should have from the 1.0 version.
Hey Sinisa,
Actually your are using an icon like this one
If you try to shift the icon on the right with a picture like this (here the backgroudn is grey to understand) but in this case you initialiaze the background to transparent
Hope this helps
https://Wsx5.afsoftware.fr
Auteur
@ Axel
Cheers, mate!
I thought about the solution you proposed - and this could work if I have one (or few) buttons with the fixed width.
If I have - for example - 3 language site - I could have three words for login (i.e.: login, s'identifier, prijava...) which are not equally long - that means I'll have to have 3 icon versions...
But what if you have the menu with 15+ buttons, all with different icons? It would be the real pain in the a**!
I won't be pointing out this issue IF I HAVEN'T NOT seen the right solution implemented in the BUTTON HOVER OBJECT!
@ Incomedia girls & guys - please copy the solution from the BUTTON HOVER OBJECT - e la fine della storia!
1>2>
---1-------------------------------------------
<style>
#imHeader_imMenuObject_10_container > ul > li:nth-child(3) .label {position:relative;left:10px !important; }
</style>
---2-------------------------------------------
<style>
#imHeader_imMenuObject_10_container > ul > li:nth-child(3) .label-wrapper .menu-item-icon { left: 30px !important;}
#imHeader_imMenuObject_10_container > ul > li:nth-child(3) .label {position:relative;left:20px !important; }
</style>
--------------------------------------------------------
>> >> Step 1 - Settings > The Advanced section > Statistics, SEO and Code > Options in the Code section | ▪Custom Code: (3°) >▼Before closing the HEAD tag
.
Auteur
@KolAsim
Thank you!
So, nothing without the coding, right? ;)
***
(this stuff should be fixed by Incomedia - but well...)
ciao, ... ... for what are your extra personal preferences, you could manage them your way, given that the program provided the right tools ...
... however, without having to resort to codes, you could directly use an image, for example:
or you could try playing with empty spaces before the name: [ (img) ___LOGIN ]
... eventually you can put your idea in the IDEA section to be evaluated ...
Hello, ciao
Auteur
Grazie!
(Google translation: ENG to ITA)>
Inserirò questo problema nella sezione IDEA.
Ma, stranamente, non ci sono commenti per Stefano o Elisa ...
... weekend >>+
... ciao ...
.