Menu link to tabs hidden by sticky header - Support | Kriesi.at

Tagged: sticky header, tabs

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
February 16, 2016 at 4:56 pm #584278

Monique
Participant

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

February 18, 2016 at 6:26 pm #585556
Vinay
Inactive Moderator
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, 8 months ago by Vinay.
February 25, 2016 at 11:57 am #588952

Monique
Participant

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

February 29, 2016 at 8:41 am #590601

Ismael
Moderator

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

February 29, 2016 at 5:51 pm #590991

Monique
Participant

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

March 3, 2016 at 12:29 pm #592582
Ismael
Moderator
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
March 17, 2016 at 6:10 pm #599849

Monique
Participant

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

March 22, 2016 at 9:00 am #601754

Ismael
Moderator

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

March 22, 2016 at 12:56 pm #601838

Monique
Participant

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

March 24, 2016 at 4:39 am #602879

Ismael
Moderator

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

March 30, 2016 at 12:37 pm #605109

Monique
Participant

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

March 31, 2016 at 7:08 am #605663

Ismael
Moderator

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

March 31, 2016 at 3:04 pm #605931

Monique
Participant

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

April 1, 2016 at 6:04 am #606487
Ismael
Moderator
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
April 1, 2016 at 11:57 am #606610

Monique
Participant

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

April 2, 2016 at 11:59 am #606941

Ismael
Moderator

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

April 4, 2016 at 5:26 pm #607761

Monique
Participant

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

April 7, 2016 at 7:47 am #609402
Ismael
Moderator
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
October 6, 2016 at 10:52 am #695962

Monique
Participant

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

October 10, 2016 at 4:41 pm #697452

Andy
Inactive Moderator

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

October 26, 2016 at 10:14 am #704187

Monique
Participant

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

October 31, 2016 at 2:35 pm #706172

Andy
Inactive Moderator

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
Author

Posts

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Menu link to tabs hidden by sticky header’ is closed to new replies.