Adjusting modules

Hi Support members,
Resolved a lot of fine tune issues thanks to the questions of forum members and the professional answers of the moderators. Thank you all for that
Just adjusting the template and run into a few specific problems.
When I scroll down via link on header page the module does not show the menu.
In the same image you can see that the tab menu is not lining well with the template. The same module is also giving problems in the mobile view.

rooms-1.jpg

Is it possible to move the text on the header page higher so it lines better against the roof of the building?
test site: http://www.3flavours.co.za/joomla336/
Derick

Hi

You have <table></table> in Your tabs content. This element is not responsive. All I can advice in this matter is to add this code to mobile.css:

Code: Select all

img {
    max-width: 100%;
}

tbody tr td {
    display: block;
}


Hi,
I tried the code but no luck.
Then I removed every table from the tabs, nothing changed
Then I put another module on the mainbody position, nothing changed
I removed the facebook plugin from the mainbody position, nothing changed.
Then I removed the parallax suffix from the module and everything fell into place.
It looks like a layout problem of the mainbody position because when i put the tabmodule into another position everything lines up nicely.
Is this solvable within the template settings?

Hi

It sounds like I have misunderstood Your first post. Please explain it a little better with some screens if possible. Removing "parallax" suffix will only replace the background with white color. No other changes to the layout.

The code I gave You is to show tables in a column in mobile view.

Sorry about that, I already had that feeling I will try to explain it better.
If you are on the header page and open rooms then it scrolls to the rooms module on the mainbody position.
It does not show the menu on top. If I remove the parallax suffix it does.

Hi

I can see there is no website we have been talking about under the mentioned address now. Can You please put it back or tell me the new url so I'll be able to check this issue.

Sorry about that, made some changes through a new module and it broke your code.
I installed everything from scratch and hoped that it would solve the issue with the scrolling but it didn't.
I would appreciate it if you could have a look at it.
http://www.3flavours.co.za/joomla336/#rooms

Hi

Ok. So where were we ? I believe last thing was to remove "parallax" module class suffix fron GK Tabs, to show it on a white background. Am I right ? If yes than please do that.

Add this to override.css and leave it even if this will not work. it will help be make some tests in firebug:

Code: Select all

#rooms {
position: relative;
top: -80px;
}


Hi,
That is not the problem!
The problem is when you are on the home page and you click on the icon "rooms" it scrolls to the module on position "mainbody"
You will then see that on top of that position there is no menu.
You can try it for yourself by scrolling up and down.
If I remove the parallax suffix on that " mainbody" position the menu will show up.
Most of the other problems I have been solving through the forum but this one is beyond my knowledge

Hi

Please remove the css. It was not helpful as much as I thought it will be.

Of course parallax can stay. I misunderstood.

Please edit /js/gk.script/js , find this function:

Code: Select all

   if(jQuery('#gkHeaderNav').length > 0 && !jQuery('#gkHeaderNav').hasClass('active')) {      
      jQuery(window).scroll(function() {
         var currentPosition = jQuery(window).scrollTop();

         if(
            currentPosition >= jQuery('#gkHeader').height() &&
            !jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').addClass('active');
         } else if(
            currentPosition < jQuery('#gkHeader').height() &&
            jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').removeClass('active');
         }
      });
   }


and try add or remove 10px from the current position. This way it will have to start to work.

Code: Select all

         var currentPosition = jQuery(window).scrollTop() + 10;

or

Code: Select all

         var currentPosition = jQuery(window).scrollTop() - 10;

Hi,
It worked after some trail and error.
I ended up with: var currentPosition = jQuery(window).scrollTop() + 60;
The site is now also live I still need to fine tune it but thanks for the support up till now.
thx, D

Hi

That's a really good information. I was not expecting it will require as much, but luckly you have figured it out Please so not hesitate to ask if You will have another problem.