Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Support request] Question on menu with photographic icons

Home Forums Support [Support request] Question on menu with photographic icons

Home Forums Support Question on menu with photographic icons

  • This topic has 18 replies, 4 voices, and was last updated 1 week ago by Elvin.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1966931
    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/

    #1967009
    David
    Staff
    Customer Support

    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.

    #1967559
    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

    #1967560
    Ceramica Sud Curlante
    #1967571
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1967588
    Ceramica Sud Curlante

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

    #1967624
    Ying
    Staff
    Customer Support

    No, this is CSS, add it to the customizer > additional CSS πŸ™‚

    #1969396
    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

    #1969923
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1970349
    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

    #1970987
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1970999
    Ceramica Sud Curlante

    logo on the left and product icons starting from the left

    #1971029
    Ying
    Staff
    Customer Support

    Isn’t that what you are having right now?
    10.21.2021-10.39.31

    #1971539
    Ceramica Sud Curlante

    https://www.ceramicasud.com/wp-content/uploads/2021/09/C-M_023-T.jpg

    #1972135
    Ying
    Staff
    Customer Support

    Oh I see, try this CSS:

    .navigation-branding {
        margin-right: 0;
    }
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.