dear mods – can you please shift that post to the closed one and open again – i think i’m on a better way to do that.

This is an inline css – so it is set on the element itself.
Open that color-section – click the advanced tab:

and see all screewidth options too – if there are values entered. ( just delete all values there) – do not forget to save those settings. And save your page.

btw – dear devs : Is it intended that the label will be affected when selecting “Show on hover only”?
On default button it is the icon!

Anyway – if you do not use that option :

#top .av_promobox .avia-button-wrap.avia-button-right .avia-button {
  display: flex !important;
}

#top .av_promobox .avia-button-wrap.avia-button-right .avia_button_icon {
  order: 2;
  margin-left: 15px
}

if you do not want to affect all promo box elements with button – use a custom class on that element f.e.: right-icon

#top .av_promobox .avia-button-wrap.right-icon .avia-button {
  display: flex !important;
}

#top .av_promobox .avia-button-wrap.right-icon .avia_button_icon {
  order: 2;
  margin-left: 15px
}

Or – if you are happy with your current solution – just wait for the next release – I think they will also extend the sticky option for the right header.

nearly most of the main browsers got developer tools. On Safari you had to activate it via the settings – advanced.
Chrome and Firefox do have that on default activated.
now navigate with your mouse over an element to inspect and via Context-Menu ( often the rightclick on mouse) you can choose “inspect” or similar to it – on german it is called “untersuchen”

If you start it the first time – it will show you now Infos you need in a “sub-window” – i prefer to have a separate Window – there are some signs to separate it from the main window:
(click to enlarge)

because my mouse was over the menu-item text – this is selected. You find your menu-item if you move up in the DOM.
PS on the right side you can see the styles concerning to that selected Element.

i do not see your selectors at all on your page
f.e. i see no class: av-fold-unfold-tuition-fees

i see only ID’s concerning to your buttons:
#av-fold-unfold-lesson-fees
#av-fold-unfold-preschool-fees
#av-fold-unfold-music-together-fees

there are changes in your setting ( names ) and these selectors are ID’s

so may be try this instead:

function ava_script_fees_click() {
?>
<script type="text/javascript">
(function ($) {
	$(document).ready(function () {
		function triggerClick(hash, container) {
			if (window.location.hash === hash) {
				$(container).find('.av-fold-button-container').trigger('click');
			}
		}

		triggerClick("#lesson-fees", "#av-fold-unfold-lesson-fees");
		triggerClick("#preschool-fees", "#av-fold-unfold-preschool-fees");
		triggerClick("#music-together-fees", "#av-fold-unfold-music-together-fees");
		
	});		
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_script_fees_click', 9999);

Test is working without changing avia-snippet-sidebarmenu.js

but: What I noticed on this occasion is that the advanced layerslider are not styled correctly for the header sidebar. What was set for Header Top Centered in the layerslider is suddenly far from being centered. This is of course related to the fixation of the header. Fixed elements are, so to speak, outside the DOM.

Edit:
I now know what the problem was: the layer slider has a switch in the advanced project settings. There is a setting called “Fit to Screen Width” where it says : “If enabled, the slider will always have the same width as the viewport, even if a theme uses a boxed layout, unless you choose the “Fit to parent height” full size mode.”

sadly you do not go to your topics once posted : https://kriesi.at/support/topic/right-sidebar-menu-sticky/

I find the method of simply using the Header on Left Sidebar variant and simply moving it to the right, while retaining the properties set there, is also easy to implement.

However, if it is now included in the next version – it is of course the better option.

Can I have a look at this page? ( if you could not post the link here – send me an e-mail)
because I think it’s easier to achieve this in another way.

f.e. this way: https://webers-testseite.de/divider-on-sliders/

at the moment i try to use the given curve divider – that does not fit because it is a konvex Curve … so be a bit patient.
we can use the konvex Curve of Enfold – but we use than that negative option (invert) – in this way we had to differ on how to transform the divider svg.
so snippet gets an if / else clause now.

• This reply was modified 10 months, 3 weeks ago by Guenni007.

This is only for top-level menu-items (if you like to have a different selector – tell us. )

.header_color .main_menu ul:first-child > li.current-menu-item .avia-menu-text {
  font-weight: 700;
}

sorry again

ok – if this is ok for you – see: https://webers-testseite.de/jak-contact/
( due to maintainance mode of my hoster – page might be not seen today )

snippet for child-theme functions.php and the contakt form 7 Form code is on that page.

snippet:
(The script is necessary because CF7 does not provide a way to select whether an input field is in focus or filled.)

function class_on_active_form_fields(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {     
    $('.wpcf7-form-control').each(function() {
      $(this).on('focus', function() {
        $(this).parent().addClass('active');
      });
      $(this).on('blur', function() {
        if ($(this).val().length == 0) {
          $(this).parent().removeClass('active');
        }
      });
    });
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'class_on_active_form_fields');

the css ( with your wrapper class ):

.form-wrapper {
  position : relative !important;
}

.form-wrapper .placeholder {
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0.5;
  transition: opacity 1s ease;
  pointer-events: none;
}

.form-wrapper .asterisk {
  color: red !important;
}

.wpcf7-form-control-wrap.active + .placeholder { 
  opacity: 0 !important;
}

the form in this setup:

<div class="form-wrapper">[text* first-name placeholder ""]<span class="placeholder">First name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[text* last-name placeholder ""]<span class="placeholder">Last name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[email* your-email placeholder " "]<span class="placeholder">E-Mail <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[textarea* textarea-716 placeholder " "]<span class="placeholder">Placeholder <span class="asterisk">*</span></span></div>

<div class="form-wrapper">[submit "Send"]</div>

I would have to look up what has changed since then (almost 5 years ago). Unfortunately, this test page of mine is so bloated with tests for other participants in this forum that some code snippets may be interfering with others. The functions.php of the child themes is already 3750 lines long.

by the way – that might be an older post of mine.
since jQuery 3

$(window).load(function(){  

is deprecated

now you had to use:

$(window).on('load', function(){

or – maybe a simpler idea – we use the left header sidebar ! – and just handle the #wrap_all as a flex container – and define the order in this way that the header goes to the right side

@media only screen and (min-width: 768px) {
  #wrap_all {
    display: flex !important;
    flex-flow: row nowrap;
  }

  #wrap_all #header {
    order: 2;
    flex: 0 1 27%;
    right: 0;
    left: auto;
  }

  #wrap_all #main {
    order: 1;
    flex: 0 1 73%;
    margin-left: 0 !important;
    border-left: none !important;
  }
  
  .responsive #top .header_bg {
    box-shadow: -5px 0px 5px -5px #666;
  }

  /*** because submenu is defined to a width of 208px ***/
  #top #avia-menu > li.dropdown_ul_available > ul.sub-menu {
    left: -207px
  }

  /*** have a bit more space from main menu-item to the fly-out submenu ***/
  .html_header_sidebar #header .av-main-nav>li {
    margin-left: 5px !important;
    padding-left: 13px;
  }
}

@media only screen and (min-width: 990px)  {
  #wrap_all #header {
    flex: 0 1 300px;
  }

  #wrap_all #main {
    flex: 0 1 calc(100% - 300px);
  }
}

see: https://enfold.webers-webdesign.de/
( the scroll away after some time does not belong to that settings here. – this is part of the inital Headersetting )

this is not styled to the end – becaue i want to go back to the original setting of header on top.
above all, you now have to extend the subnavigation to the left – but that shouldn’t be a problem using css.