Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #667992

    Hi there kriesi team,

    i’ve noticed a css problem when using the full width sub menu together with the fixed frame layout.

    When i scroll the page and the menu gets stuck to top, it sticks below the fixed frame causing the menu get cut off.

    I’ve tried to fix it with

    .av-sticky-submenu {
    	top: 20px !important;
    }

    but then the menu sticks in its right position when scrolling, but also remains in this position when the site is not scrolled.

    Unfortunately i couldn’t find different css classes for the different states.

    Is there a way to fix this?

    Thanks in advance!

    #670116

    Hey foveaworks,

    Thank you for using Enfold.

    We will forward the issue to Kriesi. For now, please modify the js > avia.js > avia_sticky_submenu function and look for this code around line 1383:

    bordermod	= html.is('.html_minimal_header') ? 0 : 1,
    

    Below, add this code:

    fixed_frame	= $('.av-frame-top').length ? $('.av-frame-top').height() : 0,
    

    Again, look for this code around line 1413:

    if(!fixed)
    						{
    							this.css({top: modifier - bordermod, position: 'fixed'}); fixed = true
    						}
    

    .. replace it with:

    if(!fixed)
    						{
    							this.css({top: modifier - bordermod + fixed_frame, position: 'fixed'}); fixed = true
    						}
    

    Best regards,
    Ismael

    #681212

    Hey Ismael,

    that did the trick. Thank you so much. Your help is much appreciated.
    Sorry for my late reply. Just came back from vacation.

    As I’m working with a child theme, your reply to this thread was also very helpful to me.

    Keep up the awesome work.

    best regards
    Niko

    #681583

    Hi Niko,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Regards,
    Rikard

    #697567

    This could not be the whole solution Ismael.
    First of all on top you mean under bordermod… replace the line with the other? or do you realy mean add the new line – no – this will end in two fixed_frame lines.

    i got now:

    bordermod	= html.is('.html_minimal_header') ? 0 : 1,
    fixed_frame	= $('.av-frame-top').length ? $('.av-frame-top').height() : 0,
    calc_margin	= function()

    and on line 1420ff

    if(scrolled + modifier > top_pos)
    {
    	if(!fixed)
    	{
    		this.css({top: modifier - bordermod + fixed_frame, position: 'fixed'}); fixed = true
    	}
    }

    look here : with “+ fixed_frame” i got a double distance
    if i change it to “- fixed_frame” the solution is good to small screens when fixed-frame is gone but on wide screens the submenu is not fixed !

    see private content

    • This reply was modified 7 years, 9 months ago by Guenni007.
    #697973

    hey @Guenni007,

    the code @Ismael provided worked for me, without any problems.

    However… the whole problem got fixed in enfold 3.8 anyway. In the changelog the issue was described with the following:
    – fixed: a positioning issue of the fixed fullwidth menu element when using the “fixed frame” layout option

    I’d suggest you update enfold to the latest version

    cheers!

    #697994

    the version i had was the latest and the latest Version of WP too.
    see here the result ( if i take the -fixed_frame it is solved for small screens when fixed-frame is gone) if there is the fixed-frame active the fixed submenu goes to absolute positioning. ??

    (if i take the code as described with “+fixed_frame” i got double margins)

    http://webers-testseite.de/kokon/

    and this is not ” fixed fullwidth menu ” my issue and i thought yours also because in your first thread you are talking about fixed submenu.

    #698970

    Hi,


    @foveaworks
    : Glad it worked. :)


    @Guenni007
    : Thanks for investigating. We’ll look into it further.

    Best regards,
    Ismael

    #699346

    what does this mean:

    fixed_frame = $('.av-frame-top').length ? $('.av-frame-top').height() : 0,

    is it a shortend if clause ( i can not find the declaration of “?”) in a jquery clause.
    $('.av-frame-top').length means the amount of .av-frame-top : so if there is one or not

    if there is one .av-frame-top fixed_frame = $(‘.av-frame-top’).height()
    if there is no .av-frame-top fixed_frame = 0

    Edit Ok i found something about a ternary operator
    (condition) ? (if_true) : (if_false)

    but i can not understand why it should work for foveaworks – and not for me.

    #700526

    Hi!

    That is an if else statement. :)

    I’m sorry but I’m not sure why it’s not working for you. We get the height of the av-frame-top container if it exists, if not set the value to zero.

    fixed_frame	= $('.av-frame-top').length ? $('.av-frame-top').height() : 0,
    

    .. and then add it to the top position value of the sticky menu.

    this.css({top: modifier - bordermod + fixed_frame, position: 'fixed'}); fixed = true
    

    Cheers!
    Ismael

    #701465

    by the way – why is it important to have a function avia_sticky_submenu() ?
    i commented the whole function out. And set the sub-menu-container to position fixed. It works for my construct because the header did not shrink.

    Nevertheless there has to be a solution on that.

    #702695

    Hi,

    Could you please provide a screenshot of the issue? Did you set the element to switch to a button on mobile? If you did, it’s not going to work properly because you disabled the avia_sticky_submenu function.

    Best regards,
    Ismael

    #703195

    well you can see the link above : webers-testseite.de/konkon

    you see here your login-data: https://kriesi.at/support/topic/full-width-sub-menu-sticks-below-frame-with-the-fixed-frame-layout/#post-697567

    you can see the different behaviors by activating on child-theme functions.php the different avia.js files.

    There are avia_plus.js (this is the avia.js with your changings from above – the plus shows the change with + fixed_frame) – does not work at all
    there is avia_minus.js ( same as above but with – fixed_frame) – works if the screen-width is in this way that fixed_frame is gone
    avia.js (normal one without changing) only works for wide screens – on small screens not
    avia_new.js ( avia_sticky_submenu function discommented) this works with my setting of sticky header with sticky submenu under the main-navigation

    with your “+” modification see here both screenshots for scrolled pages:


    because i see that on wide screens the distance is fixed_frame setting on my enfold options dialog
    and on small screens (before advanced menu is enabled – i set the submenu to display none in this case) it is 2times distance i decided to give the minus fixed_frame a chance.

    At least i thought that this could be done in my case ( a non shrinking header) without that function. But this is not a good solution – because it might have a global solution.

    • This reply was modified 7 years, 9 months ago by Guenni007.
    #704166

    Hi,

    Thank you for the info. Please post the FTP details here so that we can test it thoroughly. What are the changes added on those files (avia_minus.js and avia_new.js)?

    Best regards,
    Ismael

    #704560

    i did a duplicator backup – so if something went wrong – it is not so bad.

    i did these variations of avia.js in the child-theme/js/ folder .
    i only changed those things you mentioned above – nothing else.

    don’t look to intensiv to find a solution.
    it works with the “avia_new.js (commenting the function out)

    #705754

    Hey!

    Thank you for the info.

    We found the issue with the avia.js > avia_sticky_submenu function, line 1415:

    					if(fixed_frame)
    					{
    						modifier += fixed_frame;
    					}
    

    This code will always apply the height of the av-frame-top container to the modifier regardless of the container’s display property. The frames are hidden on screens lower than 989px so we have to add another condition.

    Line 1409:

    framed      = $('.av-frame-top').css('display') !== 'none';
    

    And line 1416:

    if(fixed_frame && framed)
    

    Regards,
    Ismael

    #705804

    great – thanks alot. This is than a little bug we found? On next update this is implemented or do i have to think on installation in the future?

    #707473

    Hi,

    I will notify Kriesi about the issue. Thanks for checking.

    Best regards,
    Ismael

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.