Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 9, 2025 at 6:32 pm #1491070
    mistermagoo8691

    Hi folks, I am afraid your example on the documentation for a fullwidth submenu with icons is not up to date (or I cannot understand it).

    Fullwidth Submenu documentation

    I already have a fullwidth submenu on my page. I’d like to replace the text with an icon.
    The section “Add Icons to Menu Item” is talking about an icon to a normal menu, not to a Fullwidth submenu.

    I’ve found a solution: I replace the “content” of each text element on the fullwidth submenu with this HTML: <span class=”heading-char avia-iconfont avia-font-entypo-fontello” data-av_icon=”” data-av_iconfont=”entypo-fontello”></span>

    It works great with the original version of the page (see img 1)
    But when I update the WPML translated version, see what I’ve got (see img 2) :-)

    What can I do?
    THX
    Ciao!
    A.-

    November 10, 2025 at 2:56 am #1491082
    Ismael

    Hey Angelo,

    Thank you for the inquiry.

    Are you using the default translation editor? Please provide the login details in the private field so we can check the issue properly.

    Best regards,
    Ismael

    November 10, 2025 at 8:09 am #1491099
    mistermagoo8691

    Sure! Here it is. The page where I was testing the icons was this one:

    https://staging.sentierigressoney.it/sentieri/gressoney-saint-jean-sentiero-1-colle-di-frudiere/

    Please switch from Italian (OK) to English (KO)…

    Is it correct that the section in the document I mentioned is not talking about how to add an icon to a fullwidth submenu? Or it was my mistake to follow a different way?

    Thanks Ismael!
    Ciao,
    A.-

    November 11, 2025 at 4:13 am #1491153
    Ismael

    Hi,

    Thank you for the inquiry.

    Looks like you’re manually placing the icon html in a fullwidth submenu element. Have you tried using the Button Row element instead of the submenu element?

    Screenshot-2025-11-11-at-11-11-39-AM

    In the screenshot above, you can see the Button Row element rendering correctly above the full-width submenu with custom html.

    Best regards,
    Ismael

    November 11, 2025 at 9:35 am #1491161
    mistermagoo8691

    Ciao Ismael. I started using a fullwidth submenu also because it had an easy “sticky submenu” option available in the configuration.
    I have struggled quite a lot with CSS magics to have it sticky also on mobile devices.

    Now that I am finally satisfied with the fullwidth submenu behaviour, I wanted to have an alternative and smallest version of it only for mobiles, with icons instead of text labels.

    You’re suggesting to use the buttonrow instead of the fullwidth subemnu: I am ok with it… could you please and kindly also provide me the CSS to make it sticky, on all media formats?
    I’ve already tried by myself but I failed…

    Thanks Ismael!
    Bye,
    A.-

    November 11, 2025 at 9:47 am #1491163
    mistermagoo8691

    (BTW: I realize only now that the fullwidth submenu can be created also using an EXISTING menu (see the option).
    And now I understand why the fulldiwth submenu documentation is explaining how to add an icon by working on the MENU…

    I am not using this option: I used the Build Simple Custom Menu. And with this option, you cannot add icons like explained in the doc. It would be worth to specify it in the documentation…)

    November 11, 2025 at 10:42 am #1491168
    Guenni007

    well you can insert them by css – just counting the menu-items:
    f.e.:
    on the left:

    #av-custom-submenu-1 .menu-item:nth-child(3) a .avia-menu-text:before {
  content: "\e82b";
  font-family: entypo-fontello;
  display:  inline-block;
  position: relative;
  color: inherit;
  margin-right: 10px
}

    on the right:

    #av-custom-submenu-1 .menu-item:nth-child(2) a .avia-menu-text:after {
  content: "\e82b";
  font-family: entypo-fontello;
  display:  inline-block;
  position: relative;
  color: inherit;
  margin-left: 10px;
}

    in combination with the page id or a custom ID or class on the element is then unique for only that sub-menu

    November 11, 2025 at 10:59 am #1491169
    Guenni007

    see f.e. a test-page: https://webers-testseite.de/clippy-2/
    ( i set a custom ID to the sub-menu: submenu-with-icons )

    #submenu-with-icons .menu-item a .avia-menu-text:before {
  font-family: entypo-fontello;
  display:   inline-block;
  position: relative;
  color: inherit;
  margin-right: 10px;
  line-height: inherit;
  font-size: 1.3rem;
  top: 2px;  /*** just a correction if font-size is bigger than text ***/
}

#submenu-with-icons .menu-item:nth-child(1) a .avia-menu-text:before { content: "\e82a"; }
#submenu-with-icons .menu-item:nth-child(2) a .avia-menu-text:before { content: "\e82b"; }
    November 12, 2025 at 4:18 am #1491216
    Ismael

    Hi,

    Thank you for the update.

    To make the buttons sticky on all screen sizes, place the Button Row element inside a Color Section, edit the section and apply a custom css class name “av-custom-sticky-menu-button-rows” in the Advanced > Developer Settings panel. Then add the following css code:

    
#main > .av-custom-sticky-menu-button-rows {
  position: fixed;
  top: 132px;
  z-index: 999;
  width: 100%;
}

#main > .av-custom-sticky-menu-button-rows + .clear + #av_section_1 {
  margin-top: 100px;
}

    You can also apply a custom css class name to the section next to the Button Row element so you can replace the default selector #av_section_1.

    Best regards,
    Ismael

    November 12, 2025 at 11:43 am #1491235
    mistermagoo8691

    Thanks Ismael. Good suggestion to use a color section as a container to make it sticky!
    Thanks again. Bye!

    November 13, 2025 at 4:24 am #1491266
    Ismael

    Hi,

    You’re quite welcome! Glad to know this has been resolved. Please don’t hesitate to open another thread if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Add icons to a fullwidth submenu’ is closed to new replies.