Tagged: header, top bar, widget area
-
AuthorPosts
-
October 3, 2019 at 11:28 am #1144448
Hi,
I’d like to add some texts in a slider in the top bar. Here’s an example of what I’m trying to do :
https://www.lecolonelmoutarde.com/fr/
Please could you help me ?
Best regards,
StephanieOctober 4, 2019 at 6:17 am #1144875Hey lupistella,
You could try to add a widget area to the header: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
Then paste Headline Rotator shortcode into it to see if that works or not.Best regards,
RikardOctober 7, 2019 at 11:39 am #1145723Hi Rikard,
I don’t want it in the header but in the top bar above.
Regards,
StephanieOctober 7, 2019 at 3:10 pm #1145806Hi Stephanie,
In this case, you’ll need to modify the header.php file or /enfold/includes/helper-main-menu.php file.
Best regards,
VictoriaOctober 7, 2019 at 11:06 pm #1145956well i do not see your site – but if it is not to complicated – maybe only text – with links
then you can use the headline-rotator shortcode as Rikard said and maybe a hook to embed this.https://webers-testseite.de/guenni/datenschutzerklaerung/
it is simply done via child-theme functions.php and on styled before on a post or page. to get the shortcode:
here just for the page-id-3:in this manner: echo do_shortcode(“…”);
add_action('ava_main_header', function() { if(is_page(3)){ echo do_shortcode("[av_headline_rotator before_rotating='' after_rotating='' interval='5' animation='' margin='' margin_sync='true' tag='h2' size='36' align='center' custom_title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' alb_description='' id='' custom_class='' av_uid='av-k1gw6wo0' admin_preview_bg=''] [av_rotator_item title='today we offer abc' link='' linktarget='' custom_title='' av_uid='av-it587'] [av_rotator_item title='but the whole week it is' link='' linktarget='' custom_title='' av_uid='av-egknj'] [av_rotator_item title='another line to present' link='' linktarget='' custom_title='' av_uid='av-6u493'] [/av_headline_rotator]"); }; });
here is a little description on how you get this shortcode: Link
October 8, 2019 at 6:53 am #1146025October 9, 2019 at 7:34 pm #1146618I’m trying to achive the same as @lupistella
Your solutions work for the normal header area, where the logo and main menu is,
but she and I would like to have this area in the top bar, where the secondary menu is located!October 9, 2019 at 8:29 pm #1146631there is a hook if the sub-menu is present.
– but if we don’t want sub-menu on top we can activate it nevertheless via filter:add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1); add_action('avia_meta_header', function() { if(is_page(3)){ echo do_shortcode("[av_headline_rotator before_rotating='' after_rotating='' interval='5' animation='' margin='' margin_sync='true' tag='h2' size='36' align='center' custom_title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' alb_description='' id='' custom_class='' av_uid='av-k1gw6wo0' admin_preview_bg=''] [av_rotator_item title='today we offer abc' link='' linktarget='' custom_title='' av_uid='av-it587'] [av_rotator_item title='but the whole week it is' link='' linktarget='' custom_title='' av_uid='av-egknj'] [av_rotator_item title='⇒ another line to present' link='' linktarget='' custom_title='' av_uid='av-6u493'] [/av_headline_rotator]"); }; });
a little css to position it:
#header_meta .sub_menu { font-size: 24px !important; position: relative; left: 50%; float: left !important; transform: translateX(-50%); top: 0; } #header_meta span { font-size: 30px; }
see testpage: https://webers-testseite.de/guenni/datenschutzerklaerung/
October 10, 2019 at 7:47 am #1146770if you had a top menu then the activation is done and that little snippet of avia_meta_header is unnecessary:
this you can erase :add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
the css will depend on the position of top menu – this here is for left position:
#header_meta .av-rotator-container { font-size: 24px !important; position: relative; left: 50%; float: left !important; transform: translateX(-50%); top: -10px; } .av_secondary_left .sub_menu { width: 80%; } #header_meta span { font-size: 30px; }
October 10, 2019 at 11:08 am #1146819October 10, 2019 at 12:10 pm #1146833Thanks, Guenni, that does not work at my end, my widget for the “top bar area” is gone.
And sorry to say that, the code is much too complicated if I would switch widgets for the top bar regularly – I am not a coder.
I need a simple widget area for the submenu/top bar area, where I can add via design -> widgets my widgets to my desire … just like it works for the “header widget area”.Is there a more simple way to just create a widget area just for the top bar, where the sub menu is located,
so that I can easily add or remove my widgets from there at design -> widgets?October 11, 2019 at 5:16 pm #1147161you can take the same hook: avia_meta_header
add_action( 'avia_meta_header', 'enfold_customization_header1_widget_area' ); function enfold_customization_header1_widget_area() { dynamic_sidebar( 'headermeta' ); }
add a new widget named: headermeta Edit: maybe you have not read the post here well.
then some quick css – depends on your header looks like:
.av_secondary_left .sub_menu { width: 80%; display: flex; flex-flow: wrap row; width: 80%; display: flex; flex-flow: wrap row; } #top .sub_menu > ul { float: none; } #header_meta .widget { float: left; padding: 0; margin: 0; left: 50%; transform: translateX(-50%); } @media only screen and (min-width: 767px) { #header_meta .widget * { color: #fff !important; } }
maybe you better remove the usual margins in the header_meta area – and in between 768px and 990px the header_meta widget area is on the right:
@media only screen and (min-width: 767px) and (max-width: 990px) { .av_secondary_left .sub_menu { width: 100%; justify-content: space-between; padding-right: 0; } #header_meta .widget { transform: none; float: right; left: auto; right: 0 !important; } } #header_meta .widget p { margin-top: 0 !important; } #header_meta .widget .widgettitle { margin-bottom: 0; }
Result: https://webers-testseite.de/guenni/datenschutzerklaerung/
October 11, 2019 at 5:27 pm #1147167by the way : because i see in your example the top-navigation on the left – this is then : av_secondary_left
so it depends the css code on your constallationif you like to choose the headline rotator with typewriter animation – and you don’t like the change between the paragraphs with that background-color you can overwrite the style this way:
.av-marked-text .av-rotator-text-single{ background-color: transparent !important }
or a different color
- This reply was modified 5 years, 2 months ago by Guenni007.
October 12, 2019 at 3:01 pm #1147374thanks, it does not work, sorry.
Could anyone of the support stuff please answer, because when other users jump in, the post will always bumped backwards in the support range.
Temp Login included in private data.
October 12, 2019 at 5:07 pm #1147425Well – that it works you can see: https://webers-testseite.de/guenni/datenschutzerklaerung/
So maybe it is a user error.
Mostly the participants do not like to read. Only copy and paste thats all.
If you will do it step by step – it works. ( except if you have some older Enfold Versions )
Now i’m out – because i don’t want to rank your postings bad. SorryOctober 13, 2019 at 12:01 pm #1147570Again: it does not work at my end! That’s why I gave the support stuff my login data!
Und bitte keine frechen Antworten, von wegen ich würde nicht lesen!
October 17, 2019 at 6:05 am #1148783Hi,
@COLORIT: The Appearance > Editor panel is not accessible, so we can’t edit the files and add the necessary snippets. If possible, please create a new thread/ticket and include the details in the private field. We’ll continue there.Best regards,
IsmaelOctober 17, 2019 at 10:15 am #1148854Hi,
I guess it’s still my ticket… but I still don’t understand what I need to do.
Regards,
StephanieOctober 21, 2019 at 4:21 am #1149681Hey!
Thank you for the update.
You can follow @Guenni007’s suggestion above. The snippet that he suggested should render a text rotator above the header.
// https://kriesi.at/support/topic/create-a-slide-texts-in-top-bar/#post-1145956
Best regards,
IsmaelOctober 21, 2019 at 7:35 pm #1149949Hi Ismael,
I’ve tried @guenni007‘s suggestion, but as @BeeCee, I couldn’t make it work…
Best regards,
StephanieOctober 23, 2019 at 10:16 am #1150429Hi,
Thank you for the update.
Can you give us access to the site? We’ll try to implement the modification for you. Please add the login details in the private field, and make sure that the Appearance > Editor panel is accessible.
Best regards,
IsmaelOctober 24, 2019 at 5:15 pm #1150951Hi Ismael,
See below my login details. Thank you !
Best regards,
StephanieOctober 25, 2019 at 11:56 am #1151170Hi,
Thank you for the update.
We added the snippet in the functions.php file around line 26 to render the rotator in the header top bar. All you need to do is adjust the title attribute value in the shortcode. Example:
[av_rotator_item title='today we offer abc' link='' linktarget='' custom_title='' av_uid='av-it587']
We also added this css code in the QuicK CSS field:
#header .av-rotator-container { position: relative; left: 50%; transform: translateX(-50%); } #header_meta .sub_menu { width: 100%; } #header .av-rotator-text-single { font-size: 20px; line-height: 30px; top: -20px; }
Please don’t forget to purge the cache prior to testing.
Best regards,
IsmaelOctober 25, 2019 at 7:26 pm #1151284Hi Ismael,
That’s brilliant, thank you !!
The only think is that we can no longer click on the language switcher (although it’s still visible in the top bar).
Thanks for your help !
Best regards,
StephanieOctober 26, 2019 at 1:17 pm #1151347Hi Ismael,
Also, the text rotator is not displayed on the french page. How could I add it ?
Best regards,
StephanieOctober 28, 2019 at 1:24 pm #1151730Hi!
The only think is that we can no longer click on the language switcher (although it’s still visible in the top bar).
Glad it’s working. To fix the above issue, try to adjust z-index property of the language switcher and the rotator widget.
#header .av-rotator-container { position: relative; z-index: 1; } #top .sub_menu > ul { z-index: 2; position: relative; }
Also, the text rotator is not displayed on the french page.
Did you copy the css code from English Theme options > General Styling panel to the French version? We added the css code at the very top of the Quick CSS field. You can copy it from the EN to the FR Quick CSS field, or create a child theme, then move the css code in the style.css file so that you don’t have to duplicate the css.
Regards,
IsmaelOctober 29, 2019 at 10:19 am #1152009Hi Ismael,
z-index worked perfectly, thanks again.
Regarding the french version, I’ve copied the CSS. But the text is still not displayed in the french version with Microsoft Edge. With Chrome, I get this admin notice:
“This element was disabled in your theme settings. You can activate it here:
Performance Settings”.Best regards,
StephanieOctober 30, 2019 at 9:13 am #1152245Hi,
Thank you for following up.
We had to set the Enfold > Performance > Disabling of template builder elements to the first option (Always load all elements) , since we added the shortcode outside the builder. It’s the only way to make the shortcode work in the top header. You may have to adjust the css code a bit to correct the layout of the rotator.
Best regards,
IsmaelOctober 30, 2019 at 9:39 am #1152251Thanks Ismael, I’ll try that.
Last thing, can I change the text to translate it into French ?
Best regards,
StephanieOctober 31, 2019 at 6:48 pm #1152824Hi,
Last thing, can I change the text to translate it into French ?
Yes, that is possible. We added a conditional tag and duplicate the rotator shortcode in the snippet that we previously added in the functions.php file. The first shortcode is for the EN and the second one is for the FR version. You can now adjust the rotator title as you wish.
Best regards,
Ismael -
AuthorPosts
- The topic ‘Create a slide (texts) in top bar’ is closed to new replies.