Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #584278

    Hi there,

    On a page of a website which is still under development we have used tabs to present content. The tabs needed to be shown in the menu and have been created by using anchor links. When in the menu you click on the link, the top part of the tabs content is hidden by the sticky menu, so the visitor misses the first item and the header for each tab.

    This is not an issue on mobile, where there is no sticky header.

    What can I do to solve this?

    Thanks & regards,
    Monique

    #585556

    Hey Monique!

    We are working on your ticket please wait while we update the results here soon.

    To resolve this issue the #tab-id-1 should be used on a paragraph just above the tab’s.

    Please feel free to get in touch with us if you have any questions.

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 10 months ago by Vinay.
    #588952

    Hi Vinnie,

    I’m afraid that won’t work. There are several tabs all each an anchor link. They all have the same problem, that is that the sticky header floats over the title of each tab. That cannot be solved by moving the achor link of the first tab to a paragraph above… You then solve the issue for the 1st tab, but the problem remains for the 2nd, 3rd et cetera tabs.

    Please have another look and advise.

    Thanks & regards,
    Monique

    #590601

    Hi!

    Did you fix this? I checked the site and the anchor lands on top of the tab container on click but the smooth scroll is gone. Did you disable it?

    Cheers!
    Ismael

    #590991

    Hi Ismael,

    I haven’t changed anything to the settings / theme options. I checked in various browsers and saw the problem is the biggest on FF (see print screen). On Chrome, IE and Opera it looks slightly better since the title is readable, althoug not perfect (to my opinion). So it might be that you use another browser than me and that you don’t see the problem?

    Regards,
    Monique

    #592582

    Hi!

    Alright. You can adjust the scrollTop position or the scroll positoin by modifying the js > avia.js file. Look for this code around line 718:

    if(tempPadding > 0 && shrink)
    						{
    							tempPadding = (tempPadding / 2 ) + non_shrinking + non_shrinking2;
    						}

    .. adjust the value.

    if(tempPadding > 0 && shrink)
    						{
    							tempPadding = (tempPadding / 2 ) + non_shrinking + non_shrinking2 + 100;
    						}
    

    Remove browser cache or hard refresh the page.

    Best regards,
    Ismael

    #599849

    Hi Ismael,

    To my opinion it is not such a great idea to change core files of the theme. It is not good for future maintenance.

    Can I place this avia.js file in the Child Theme, like the css and functions file, taking into consideration the level structure of the original theme folders?

    Regards,
    Monique

    #601754

    Hey!

    With all due respect. in my opinion, those links are a bit pointless specially on mobile because, in a user perspective, browsing through the channel of links is a lot of work if I can directly click through the tabs to show the content. My point is that you don’t need to create an anchor link for each tab. All you need is a direct link to the Services > Translation section and let users click on the tab to display each services’ content.

    Back to the original issue at hand, I’m sorry but you can’t do this modification in the child theme. We will have to come up with a custom script to workaround with the issue. This might take a while so if you need an immediate solution, you can contact our partner codeable: http://kriesi.at/contact/customization

    Cheers!
    Ismael

    #601838

    Hi Ismael,

    With all due respect, the client wants these specific translation services in their main nav menu.

    In fact I agree with the client: you should be able to place links to practically anywhere in the website you want in order to offer a visitor the best possible navigation experience. And you should be able to see where you were linked to when you click a certain link. Now it is hidden by the sticky header.

    Custom work is not an option.

    If there is no solution for this, you can flag this topic as solved.

    Regards,
    Monique

    #602879

    Hey!

    In fact I agree with the client: you should be able to place links to practically anywhere in the website you want in order to offer a visitor the best possible navigation experience. And you should be able to see where you were linked to when you click a certain link. Now it is hidden by the sticky header.

    Did you try those links on mobile?

    Best regards,
    Ismael

    #605109

    Hi Ismael,

    Yes, like I mentioned in the first message of this topic, on smaller mobiles (msartphones) there is no sticky header and there it is not an issue.

    The problem exists on tablets and pc, so larger screens than smartphones, where there is the sticky header.

    Regards,
    Monique

    #605663

    Hey!

    Thank you for the info. Unfortunately, the only workaround that we can offer for now is the avia.js modification above: https://kriesi.at/support/topic/menu-link-to-tabs-hidden-by-sticky-header/#post-592582

    There’s a way to move the avia.js file in the child theme folder but it’s not update-proof as you would expect: https://kriesi.at/support/topic/how-do-i-disable-wordpressenfold-lightbox-but-retain-plugins-lightbox-effect/#post-577257

    Regards,
    Ismael

    #605931

    Thanks Ismael,

    You’re workaround unfortunately doesn’t help. I was checking in various browsers on my pc and it seems to me that the issue only exists in FF. Strangely enough IE, Chrome and Opera don’t show the same problem; with or without your workaround, they all look good. Omg, why can’t all these browsers follow the same ‘rules’…?

    I checked a littlebit further and found out that the problem is visible in screen widths from 768 px up to approx. 1280 px. Under 768 px, the screen switches the tabs view to 1 column and that looks fine. Above 768 px, the screen shows the tabs title left of the tab content and than the tab h3 disappears under the sticky header. When I enlarge my screen, I can see the tab container moving down and at a certain width (approx. 895 px) I can see the (1st) tab title and h3.

    Apart from that the problem exists also on my tablet (Samsung) on portrait mode, not in landscape mode. I will check also on an iPad as soon as I have one available.

    Regards,
    Monique

    #606487

    Hi!

    Thank you for the info. Please look for this code around line 737:

    if(isMobile) shrink = false;
    

    .. below, add this line:

    fixedMainPadding = fixedMainPadding + 100;
    

    Remove browser cache or hard refresh the page before checking. If it doesn’t work, provide the FTP details here so that we can check it.

    Regards,
    Ismael

    #606610

    Hi Ismael,

    I’m afraid that doesnt help either. I think I will give up (and hope the client will not complain).

    You can flag this topic as solved.

    Thanks & regards,
    Monique

    #606941

    Hey!

    Alright. However, if you can provide the FTP details, we’ll be happy to check it for you. We also found another workaround that may work without modifying the child theme: https://kriesi.at/support/topic/anchor-not-aligning-with-color-section/#post-606940

    Cheers!
    Ismael

    #607761

    Hi there,

    Please find FTP details below.

    Wonderful if you want to check. I work with a child theme, so best is to use the (functions.php) file in there.

    Regards,
    Monique

    #609402

    Hi!

    I’m not sure what’s happening but I can’t access the file server:

    Status:	Connecting to 87.250.155.140:21...
    Status:	Connection established, waiting for welcome message...
    Status:	Initializing TLS...
    Status:	Verifying certificate...
    Status:	TLS connection established.
    Status:	Connected
    Status:	Retrieving directory listing...
    Command:	PWD
    Response:	257 "/" is the current directory
    Command:	TYPE I
    Response:	200 Type set to I
    Command:	PASV
    Response:	227 Entering Passive Mode (87,250,155,140,236,200).
    Command:	MLSD
    Error:	Connection timed out after 20 seconds of inactivity
    Error:	Failed to retrieve directory listing
    

    If you have the time, you can do these simple steps:

    1.) Set the Header > Header Layout > Header Size to custom pixel value then adjust it.

    2.) Add this code in the Quick CSS field:

    .html_header_top.html_header_sticky.html_large #header_main .container, .html_header_top.html_header_sticky.html_large.html_main_nav_header .main_menu ul:first-child > li a {
        height: 116px !important;
        line-height: 116px !important;
    }
    
    .html_header_top.html_header_sticky.html_large .header-scrolled #header_main .container, .html_header_top.html_header_sticky.html_large.html_main_nav_header .header-scrolled .main_menu ul:first-child > li a {
        height: 58px !important;
        line-height: 58px !important;
    }

    3.) Add the following code in the functions.php file:

    add_action('init', 'ava_action_init');
    function ava_action_init() {
        global $avia;
    	$avia->options['avia']['header_custom_size'] = 160;
    	return $avia;
    }

    Adjust the “header_custom_size” value as needed.

    Regards,
    Ismael

    #695962

    Hi,

    A while ago, but still looking for a solution for this issue…

    I followed Ismael’s instructions above (#609402 of April 7th) but unfortunately that didn’t work. The top of the tab element is still hidden by the menu. I deleted everything from style.css and functions.php again, but kept the Header > Header Layout > Header Size to custom pixel value at 116px.

    Can you try again to login please and have a look? Below new login info.

    Thanks a lot and best regards,
    Monique

    #697452

    Hi,

    I can’t see that anything gets hidden: http://i.imgur.com/aLo2Sg6.png

    Can you provide us screenshots of the issue please?

    Best regards,
    Andy

    #704187

    Hi Andy,

    When preparing the screenshots for you I remembered I created them before (in February last). Then when I checked again on the website, it looks different from February…

    1) the screenshot what it looked like when I started this topic in February 2016: : http://translators.nl/print-screen-using-sticky-shrinking-header-and-tabs.jpg > first tab and title not readable.

    2) the screenshot what it looks like now: http://translators.nl/print-screen-using-sticky-shrinking-header-and-tabs-new.jpg > all readable (although not as perfect as your screenshot).

    I am so suprised!!!

    Whatever happened (browsers have been changed?) it looks acceptable now. On my screen the first tab and title are a bit tight, but all can be seen and read.

    I think there is no need for further investigation, so can you please flag this topic as closed?

    Thanks a lot for all your help!

    Regards,
    Monique

    #706172

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Menu link to tabs hidden by sticky header’ is closed to new replies.