Tagged: sticky header, tabs
-
AuthorPosts
-
February 16, 2016 at 4:56 pm #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,
MoniqueFebruary 18, 2016 at 6:26 pm #585556Hey 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, 8 months ago by Vinay.
February 25, 2016 at 11:57 am #588952Hi 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,
MoniqueFebruary 29, 2016 at 8:41 am #590601Hi!
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!
IsmaelFebruary 29, 2016 at 5:51 pm #590991Hi 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,
MoniqueMarch 3, 2016 at 12:29 pm #592582Hi!
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,
IsmaelMarch 17, 2016 at 6:10 pm #599849Hi 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,
MoniqueMarch 22, 2016 at 9:00 am #601754Hey!
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!
IsmaelMarch 22, 2016 at 12:56 pm #601838Hi 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,
MoniqueMarch 24, 2016 at 4:39 am #602879Hey!
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,
IsmaelMarch 30, 2016 at 12:37 pm #605109Hi 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,
MoniqueMarch 31, 2016 at 7:08 am #605663Hey!
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,
IsmaelMarch 31, 2016 at 3:04 pm #605931Thanks 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,
MoniqueApril 1, 2016 at 6:04 am #606487Hi!
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,
IsmaelApril 1, 2016 at 11:57 am #606610Hi 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,
MoniqueApril 2, 2016 at 11:59 am #606941Hey!
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!
IsmaelApril 4, 2016 at 5:26 pm #607761Hi 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,
MoniqueApril 7, 2016 at 7:47 am #609402Hi!
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,
IsmaelOctober 6, 2016 at 10:52 am #695962Hi,
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,
MoniqueOctober 10, 2016 at 4:41 pm #697452Hi,
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,
AndyOctober 26, 2016 at 10:14 am #704187Hi 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,
MoniqueOctober 31, 2016 at 2:35 pm #706172Hi,
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 -
AuthorPosts
- The topic ‘Menu link to tabs hidden by sticky header’ is closed to new replies.