Viewing 30 posts - 1 through 30 (of 32 total)
  • Author
    Posts
  • #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,
    Stephanie

    #1144875

    Hey 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,
    Rikard

    #1145723

    Hi Rikard,
    I don’t want it in the header but in the top bar above.
    Regards,
    Stephanie

    #1145806

    Hi Stephanie,

    In this case, you’ll need to modify the header.php file or /enfold/includes/helper-main-menu.php file.

    Best regards,
    Victoria

    #1145956

    well 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

    #1146025

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1146618

    I’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!

    zzz

    #1146631

    there 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/

    #1146770

    if 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;
    }
    #1146819

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1146833

    Thanks, 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”.

    @rikard

    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?

    #1147161

    you 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/

    #1147167

    by 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 constallation

    if 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 4 months, 2 weeks ago by  Guenni007.
    #1147374

    thanks, 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.

    #1147425

    Well – 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. Sorry

    #1147570

    Again: 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!

    #1148783

    Hi,

    @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,
    Ismael

    #1148854

    Hi,
    I guess it’s still my ticket… but I still don’t understand what I need to do.
    Regards,
    Stephanie

    #1149681

    Hey!

    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,
    Ismael

    #1149949

    Hi Ismael,
    I’ve tried @guenni007‘s suggestion, but as @BeeCee, I couldn’t make it work…
    Best regards,
    Stephanie

    #1150429

    Hi,

    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,
    Ismael

    #1150951

    Hi Ismael,
    See below my login details. Thank you !
    Best regards,
    Stephanie

    #1151170

    Hi,

    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,
    Ismael

    #1151284

    Hi 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,
    Stephanie

    #1151347

    Hi Ismael,
    Also, the text rotator is not displayed on the french page. How could I add it ?
    Best regards,
    Stephanie

    #1151730

    Hi!

    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,
    Ismael

    #1152009

    Hi 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,
    Stephanie

    #1152245

    Hi,

    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,
    Ismael

    #1152251

    Thanks Ismael, I’ll try that.
    Last thing, can I change the text to translate it into French ?
    Best regards,
    Stephanie

    #1152824

    Hi,

    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

Viewing 30 posts - 1 through 30 (of 32 total)

The topic ‘Create a slide (texts) in top bar’ is closed to new replies.