Question on menu with photographic icons

Hi there,

if you edit your menu, in the Navigation label field you can add an <img> HTML before the text.
Example of img html can be found here:

https://www.w3schools.com/tags/tag_img.asp

It would then require a little CSS to stack the image on top of the text. Which i can help with once you set that up.

hello i inserted the icons.
It seems to me that he is fine too.
If you have further advice to give me, they are welcome

https://www.ceramicasud.com/

Hi there,

Give this CSS a try:

.main-nav > ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-nav > ul > li > a >font {
    font-size: 10px;
}

.main-nav > ul > li > a > img {
    height: 50px;
    width: 50px;
}

Let me know :)

I have to insert it on the graphic theme Function.php?

No, this is CSS, add it to the customizer > additional CSS :)

I entered the code you provided me with.

it's perfect
I have only one question

In your opinion, the smartphone display is fine or can be improved

Thank you

You can give this CSS a try, so there'll be 4 menu items per row:

.mobile-header-sticky #mobile-header.toggled .main-nav>ul {
    display: flex;
    flex-wrap: wrap;
}
.mobile-header-sticky #mobile-header.toggled .main-nav>ul>li {
    width: 25%;
}

Feel free to change the 25%value :)

.main-nav > ul > li > a {
display: flex;
flex-direction: column;
align-items: center;
}

.main-nav > ul > li > a >font {
font-size: 10px;
}

.main-nav > ul > li > a > img {
height: 50px;
width: 50px;
}

the code works, I ask that it is only possible to have an alignment of the whole menu to the left

from desktop view

this is the site

I ask that it is only possible to have an alignment of the whole menu to the left

Do you mean switch the positions of logo and navigation on desktop? Navigation on the left and logo on the right?

Let me know :)

logo on the left and product icons starting from the left

Isn't that what you are having right now?
https://www.screencast.com/t/NLU1dws1fxy

Oh I see, try this CSS:

.navigation-branding {
    margin-right: 0;
}