WebSite X5Help Center

 
B. Admin
B. Admin
User

Icon Image: Menu: Size & Margin Space  en

Autor: B. Admin
Besucht 2185, Followers 2, Geteilt 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!

:)

Gepostet am
10 ANTWORTEN - 1 KORREKT
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?

Mehr lesen
Gepostet am von Esahc ..
B. Admin
B. Admin
User
Autor

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!

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

Mehr lesen
Gepostet am von B. Admin
B. Admin
B. Admin
User
Autor

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)

Mehr lesen
Gepostet am von B. Admin
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats 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.

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats 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... ;-)

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
B. Admin
B. Admin
User
Autor

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

Mehr lesen
Gepostet am von B. Admin
B. Admin
B. Admin
User
Autor

Heres the Template structure. Just in case.

Mehr lesen
Gepostet am von B. Admin
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats 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...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪