WebSite X5Help Center

 
B. Admin
B. Admin
User

Icon Image: Menu: Size & Margin Space  en

Author: B. Admin
Visited 2178, Followers 2, Shared 0  

MENU ICON AND TEXT ALIGNMENT (size/margins/MD principles)

NOTE: (See Image example) 

Edition: V14pro

Summary: Sidebar | Vertical Main Menu Navigation

Problem(s):

1. Cannot move icon to the right without moving to whole object... (icon page menu | 24x24px)

2. Cannot evenly line up size of text so its aligned with the icon on the left.

Can anyone offer a suggestion on how to indent the icon menu image on the left and also align it with the text so its center aligned.  

As you can see in the image, the icon sits even in the middle and the text it raised.

I've tried some Illustrator work-arounds but had no luck yet.

Many Thanks!

:)

Posted on the
10 ANSWERS - 1 CORRECT
Esahc ..
Esahc ..
Moderator

Beta, if you created the image on a transparent background the size of the button with the icon placed where you want it, then set menu background to transparent, would that work?

I assume you are placing an image as a background behind the menu object?

Read more
Posted on the from Esahc ..
B. Admin
B. Admin
User
Author

Thanks for the reply!

The mockup i'm trying to layout is similar to that of the Google express layout. (see image)

Current Method: I'm uploading a 24x24px transparent icon via the Page Properties -> Graphic -> Options -> Icon for the Menu Item (upload)

-------------------

I'll give it another try, but let me know if my current method is incorrect.

Greatly Appreciated!

-------------------

Read more
Posted on the from B. Admin
B. Admin
B. Admin
User
Author

Heres the mobile layout. Basically the same but the Logo Drops. (not concerend about the logo dropping...Just the alignment of text/icon..as seen here)

Read more
Posted on the from B. Admin
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

Post the LINK of your online example, so that we can evaluate, maybe some ideas come.

(IT) Posta il LINK del tuo esempio online, in modo che si possa valutare, magari viene qualche idea.

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... ... LINK of your online example, ...otherwise, it does nothing, like not said... wink

... ... LINK del tuo esempio online, ...altrimenti, fa niente, come non detto... ;-)

Read more
Posted on the from  ‪ KolAsim ‪ ‪
B. Admin
B. Admin
User
Author

... ... I appreciate your help so if i sound frusturated, I am, But not at you. laughing. Thank you.

... ...  Mi dispiace. Non parlo italiano. Ma ho guardato The Godfather parte 1,2,3 questo fine settimana. Film meraviglioso. Io parlo inglese. È tutto. E un po 'di spagnolo.

---------------------ebsite i'm working on is not live yet (if thats what your asking)

  • All i want to do is align text & icon in the sidebar menu.

Here are the settings within the X5 control.

Also, I sketched an example of the sidebar menu alignment.

----------------

It would seem to me that the "Icon for the Menu Item" would have a container size that can Align and Center with the Menu Text on the Right.

  • Is thereMax/Min images?
  • Margins? Fixed width?

------------------

Heres what it looks like on X5-14pro .

As you can see the Text is Raised and the Icon is Center Left Aligned

Read more
Posted on the from B. Admin
B. Admin
B. Admin
User
Author

Heres the Template structure. Just in case.

Read more
Posted on the from B. Admin
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Esahc ..
Beta, if you created the image on a transparent background the size of the button with the icon placed where you want it, then set menu background to transparent, would that work? I assume you are placing an image as a background behind the menu object?

As already mentioned by Esahc .. - With your graphics program you could create PNG icons with the size of the button, and with a 100% alpha transparent outline (yellow!), Suitable for distance.
... otherwise it would be necessary to study extra solutions with personalized code ...

 etc. ...

(IT) - Come già detto da Esahc .. - Con il tuo programma di grafica potresti realizzare icone PNG con le misure del pulsante, e con uno scontorno trasparente alfa 100%(yellow!), adeguato per la distanza.
... altrimenti occorrerebbe studiare soluzioni extra con codice personalizzato...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪