WebSite X5Help Center

 
Sinisa B.
Sinisa B.
User

ICON ALIGN IN THE MENU-BUTTON?  en

Autor: Sinisa B.
Visitado 1254, Seguidores 1, Compartilhado 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!

Publicado em
14 RESPOSTAS
Sinisa B.
Sinisa B.
User
Autor

Anyone?

Ler mais
Publicado em 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

Ler mais
Publicado em de Stefano G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Sinisa B.
Anyone?

... LINK...?...

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Autor

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








Ler mais
Publicado em de Sinisa B.
Sinisa B.
Sinisa B.
User
Autor

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

Ler mais
Publicado em de Sinisa B.
Axel  
Axel  
User
Usuário do mês FR

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

Ler mais
Publicado em de Axel  
Sinisa B.
Sinisa B.
User
Autor

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

Ler mais
Publicado em 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Autor

@KolAsim

Thank you!

So, nothing without the coding, right? ;)

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

Ler mais
Publicado em 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

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Sinisa B.
Sinisa B.
User
Autor

Grazie!

(Google translation: ENG to ITA)>

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

Ler mais
Publicado em 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪