specific menu bar look / TYPO3 -> WP Enfold - Support | Kriesi.at

Tagged: background color, menu-item, symbol

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
August 31, 2022 at 5:19 pm #1363390

oestersund
Participant

Dear Team,
we want to migrate the page below from TYPO3 to WP using enfold (currently early draft). The question is re. the menu bar look of specific items (TYPO 3: the red symbolized items like search, ansprechpartner, …

1. Using a symbol instead / in addition to text – pls see WP draft “Team”
2. Have a cusomt background on specidic menu items – pls see TYPO3 laoyut

What is your recommendation to realize this? Does not to be 1:1 vs TYPO3, but a clear differentiation of Nav items left part vs right part

thx a lot & best regards

Re 1. I used so far in the menu specs:
Team [av_font_icon icon='ue80b' font='entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' linktarget='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

-> maybe there is a more clever / better way I hope ..

September 1, 2022 at 8:04 am #1363439
Ismael
Moderator
Hey Tilman,

Thank you for the inquiry.

1-2.) You may need to manually insert the custom menu items directly in the enfold/includes/helper-main-menu.php template file or insert a text widget and placed it inside the header using action hooks. And copy the css or styles from the existing site.

Please check the documentation below for more info on how to use hooks in order to insert a widget area inside the header.

// https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

This is the actual html of the icon menu items from the TYPO3 site.
```
<div class="NavService-wrap" role="navigation">
<div class="NavService-item NavService-item--search">
                  <a class="NavService-item-link js-navSearch" href="/suche/">
                    <span class="NavService-item-title">Suche</span>
                  </a></div>
<div class="NavService-item NavService-item--contactperson">
                  <a class="NavService-item-link" href="/ansprechpartner/">
                    <span class="NavService-item-title">Ansprechpartner</span>
                  </a></div>
<div class="NavService-item NavService-item--contactform">
                  <a class="NavService-item-link" href="/fallmeldung/">
                    <span class="NavService-item-title">Fallmeldung</span>
                  </a></div>
</div>
```
Best regards,
Ismael
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.