[Support request] Question on menu with photographic icons

[Ceramica Sud Curlante]

I ask you if it is possible to create a menu of custom icons like the one on my old site

https://www.ceramicasud.it/

[David]

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.

[Ceramica Sud Curlante]

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

[Ceramica Sud Curlante]

https://www.ceramicasud.com/

[Ying]

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 🙂

[Ceramica Sud Curlante]

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

[Ying]

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

[Ceramica Sud Curlante]

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

[Ying]

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 🙂

[Ceramica Sud Curlante]

.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

[Ying]

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 🙂

[Ceramica Sud Curlante]

logo on the left and product icons starting from the left

[Ying]

Isn’t that what you are having right now?

[Ceramica Sud Curlante]

[Ying]

Oh I see, try this CSS:

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

[Author]

Posts