WebSite X5Help Center

 
Sinisa B.
Sinisa B.
User

ICON ALIGN IN THE MENU-BUTTON?  en

Autore: Sinisa B.
Visite 1405, Followers 1, Condiviso 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!

Postato il
14 RISPOSTE
Sinisa B.
Sinisa B.
User
Autore

Anyone?

Leggi di più
Postato il da 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

Leggi di più
Postato il da Stefano G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Sinisa B.
Anyone?

... LINK...?...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Autore

@ 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!








Leggi di più
Postato il da Sinisa B.
Sinisa B.
Sinisa B.
User
Autore

@ 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.

Leggi di più
Postato il da Sinisa B.
Axel  
Axel  
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

Leggi di più
Postato il da Axel  
Sinisa B.
Sinisa B.
User
Autore

@ 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! 

Leggi di più
Postato il da 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

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Autore

@KolAsim

Thank you!

So, nothing without the coding, right? ;)

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

Leggi di più
Postato il da 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

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Autore

Grazie!

(Google translation: ENG to ITA)>

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

Leggi di più
Postato il da 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

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪