gkTabs extended above module top

Hi Gavick,

I'm having a problem with gkTabs sticking up above the background image on my iPhone 5S. The setup is from the demo in the third module down on the Home page. I have 7 tabs in my site instead of 4 as in the demo, and they stack up and extend off the top of the background image of my module on my phone (screenshot attached).
How do I fix this?

Thanks!

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi

Try add this code to mobile.css file

Code: Select all

.transparent-tabs .gkTabsNav {
    position: relative;
    top: 0;
}


Hi

Try add this code to mobile.css file

Code: Select all

.transparent-tabs .gkTabsNav {
    position: relative;
    top: 0;
}


Thanks Teitbite!
The code quoted above pushed the tabs up, entirely outside of the parallax photo background. To fix, I changed it to this:

.transparent-tabs .gkTabsNav {
position: /* relative; */ absolute;
top: 0;
border: none;
}

I also removed the border. Now the issue is that the headline and other text centered in the image is overlapping the tabs (since I have 7 tabs). I tried adding margin-bottom: 15px; to the code, but it didn't have any effect. Have any ideas/suggestions for pushing the headline down?

Hi

Add this to mobile.css

Code: Select all

.transparent-tabs .gkTabsItem > .box {
    padding-top: 280px !important;
}


Thanks Teitbite,

These are the problems which remain:

The title text of the module centers within the background image area, overlapping other items relating to the module, e.g.:

1. On the top module on the home page, The logo and menu toggle overlap the module title text elements.

2. In the module with the tabs on it, the title text overlaps all of the tabs.

It seems that two things might have to happen:

1. The title text needs to somehow stay clear of the other elements (not overlap). I guess that means it needs to move down below the other elements on mobile devices.

2. Maybe the image sizes need to be made deeper, to accommodate the deeper text elements?

Can this be done just for mobile devices, and how?

Thanks

Hi

I'm afraid I lost the url to Your site. I only have a link to primal website, but there is no tabs there, so I'm guessing You have another website where we were discussing this problem for. Please post it here if You can or use PM if You do not want to share this link yet.

Hi

I'm afraid I lost the url to Your site. I only have a link to primal website, but there is no tabs there, so I'm guessing You have another website where we were discussing this problem for. Please post it here if You can or use PM if You do not want to share this link yet.

You have the correct link. The 7 tabs are in the third section down on the home page and starts with the "Personal Training" tab. To see the issue, please view on a smartphone, or make your browser window very small. You'll see that on a smart phone the 7 tabs center within the section, and then the title text is also centered right on top of the 7 tabs. What I think I'd rather have is for the image to be deeper and the 7 tabs be at the top, and the title text below the tabs.
Hope that makes sense. Can that happen?

Hi

Nevermind. Just found out it's the same page.

1. Add this code:

Code: Select all

@media only screen and (max-width:840px) {
.frontpage #gkHeaderMod, .frontpage .blog-page > .header, .frontpage .single-page > .header, .frontpage .search-page .header {
    height: 420px;
}
}

@media only screen and (max-width:640px) {
.frontpage #gkHeaderMod, .frontpage .blog-page > .header, .frontpage .single-page > .header, .frontpage .search-page .header {
    height: 340px;
}
}

@media only screen and (max-width:400px) {
.frontpage #gkHeaderMod, .frontpage .blog-page > .header, .frontpage .single-page > .header, .frontpage .search-page .header {
    height: 400px;
}
}


2.

@media only screen and (max-width:640px) {
.transparent-tabs .gkTabsNav {
position: relative;
}

.parallax-bg-layer {
top: 0 !important;
}
}