WebSite X5Help Center

 
Sinisa B.
Sinisa B.
User

ICON ALIGN IN THE MENU-BUTTON?  en

Auteur : Sinisa B.
Visité 268, 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
14 RéPONSES
Sinisa B.
Sinisa B.
User
Auteur

Anyone?

Lire plus
Posté le de Sinisa B.
Incomedia
Stefano G.
Incomedia

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

Lire plus
Posté le de Stefano G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Sinisa B.
Anyone?

... LINK...?...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
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!








Lire plus
Posté le de Sinisa B.
Sinisa B.
Sinisa B.
User
Auteur

@ Axel

Yeah, right... cool

Icon alignment in the main MENU BUTTON is something that any web design tool should have from the 1.0 version.

Lire plus
Posté le de Sinisa B.
Wsx5.afsoftware.fr  
Wsx5.afsoftware.fr  
User

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

Lire plus
Posté le de Wsx5.afsoftware.fr  
Sinisa B.
Sinisa B.
User
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! 

Lire plus
Posté le de Sinisa B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Sinisa B.
@ KolAsim Thank you! Here is the link (you can see the issue in the LOGIN button): https://www.izradawebshopa.eu/demoshop_eng/

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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Auteur

@KolAsim

Thank you!

So, nothing without the coding, right? ;)

***
(this stuff should be fixed by Incomedia - but well...)

Lire plus
Posté le de Sinisa B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Auteur

Grazie!

(Google translation: ENG to ITA)>

Inserirò questo problema nella sezione IDEA.
Ma, stranamente, non ci sono commenti per Stefano o Elisa ...

Lire plus
Posté le de Sinisa B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Sinisa B.
... ...  Ma, stranamente, non ci sono commenti per Stefano o Elisa ...

... weekend >>+ 

Stefano G.
... ... ...  At the moment, I am afraid such a result could only be achieved with custom code ... ... ... 

... ciao ... wink

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪