Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #1322655

    Hi there,

    I need your support.
    I have inserted an image into a menu with the following code, which otherwise works wonderfully with other themes.

    <p style="text-align: margin;"><img class="alignnone size-full wp-image-111" src=""/>

    But the whole thing is not in line with the other menu items. See the following picture.

    example 1

    But the whole thing is not in line with the other menu items. See the following picture. Even with margin settings nothing changes.
    With the following code, it is in a row, but I cannot make the margin settings here, because I would like to have the image a little further above.

    <img src=""/>

    Do you have a solution?



    Could you post a link to where we can see the actual results on your site please?

    Best regards,

    This reply has been marked as private.

    This is something that could not work:

    p style="text-align: margin;"

    text-align: ?
    margin : no colon is noted above – and no dots between the values (0 0 0 0) – if all have the same value shorten to:
    margin: 0

    i do not know why there had to be a p-tag but if so – a closing p-tag had to be there too

    <p style="text-align: left;  margin: 0;"><img class="alignnone size-full wp-image-111" src=""/></p>

    Oh Thx! Now it works, and i can make margin settings. Thx u vermy much!

    I use the same code for (login icon)
    <p style=”text-align: margin;”>`

    You are right about the p tag – that was my mistake.


    no – definitly not only the closing tag
    that was a completely wrong way to write down the css. I would be very surprised if it would work anywhere.
    on margin – no separators between the values !
    if you have 4 values on it it is: margin: 10px 0 0 0 ;
    ( means margin-top: 10px ; margin-right: 0; margin-bottom: 0; margin-left: 0 )
    if there are three values: margin: 0 10px 0
    ( means magin-top: 0; margin-right and margin-left: 10px; margin-bottom: 0; )
    if there are two values: margin: 10px 0;
    (means margin-top and margin-bottom : 10px ; margin-right and margin-left: 0 )

    semicolons between different style settings please ( so text-align and margin had to be separated by semicolon )

    allowed values for text-align: left|right|center|justify|initial|inherit;

    All this is not bad, we are all still learning. And no question is too stupid – only not asking is stupid.


    The text aglin makes sense to me. Even embarrassing for me :) Would you help me to reduce the code?
    So that only margin and size settings are left?

    `<p style=”text-align: left; margin -10 0 0 0;”>

    The entered values, image source and dimensions are for testing purposes only. – Just in case you wonder about the meaning of the values etc. :)

    Thx for ur support


    sorry here the code:

    <p style="text-align: left; margin -10 0 0 0;"><img class="alignnone size-full wp-image-111" src="" width="20" height="20"/></p>


    and even here there is the colon missing after margin -and the units of the value ( zero could be without unit ) !

    <p style="text-align: left; margin: -10px 0 0 0;"><img class="alignnone size-full wp-image-111" src="" width="20" height="20"/></p>

    thank u a lot! bzw. Vielen Dank Guenni :)

    • This reply was modified 2 years, 6 months ago by FORMATIG.

    nicht dafür ! ;)



    Thanks for helping out @guenni007 :-)

    Is everything working as it should now @FORMATIG? Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,


    by the way : i do not now why you like to have that png in your menu –
    but if you look into the appearance – menu settings on window top right there is “screen options”
    if you activate to see css classes on menu-items you can give a class ( in my case : gradient ) to menu-items then. And with that class you can even have animated backgrounds on menu-items. see :

    li.gradient .avia-menu-text {
        color: #fff;
        background: linear-gradient(-45deg,#FFA63D,#FF3D77,#338AFF,#3CF0C5);
        background-size: 600%;
        border: none !important;
        animation: anime 14s linear infinite;
        padding: 10px 20px !important;
        border-radius: 10px !important;

    next way – you can have the enfold options on that menu page to mark the option : “Button Style colored”
    this color can be changed to what ever you like. ( see same link : Impressum )
    and with a border-radius valued with 4 values you can influence each corner separatly of that rectrangle:
    ( top-left top-right bottom-right bottom-left – nomenclatura goes clockwise from top-left corner )

    #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
      border-radius: 0 0 10px 10px;

    and f.e. on your screenshot above – you can have that for your contact button too ;)



    Thanks for your help @guenni007 :)

    Best regards,

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.