Css problems
By camron on Monday, 15 June 2015
Posted in Technical Issues
Replies 12
Likes 0
Views 755
Votes 0
Since my last ticket about this was locked I need to ask again:

I am using a module called "JT Fixed Display" to display my main menu. This module will float at the top of the screen. Easysocial is the only component that will cover the module instead of being hidden behind it when a user scrolls down. Can you please help me fix the layout so that easysocial no longer covers my main menu ?


Easysocial tech support recommended this:

You can this css code in your custom.css file.

#rt-top-surround position{
position: relative;
z-index: 2;
}
#rt-transition{
position: relative;
z-index: 1;
}


This solution worked good on desktop and laptops but has affected mobile display so that all components now cover my menu.

perhaps some css code could be added to my mobile menu module here:
administrator/index.php?option=com_advancedmodules&view=module&layout=edit&id=278

Please help. My site is now almost unusable on mobile.
Thank you
Hello Camron,

I am sorry for the delay of this reply.

It seems like the mysql error still there and we cannot access the site, http://screen.stackideas.com/2015-06-18_1117.png . If the site is back online, perhaps you can try with the bottom toolbar CSS z-index with higher value so it will display on top of easysocial page.

Looking forward to your response.
Ezrul Fazwan
·
Thursday, 18 June 2015 11:20
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Camron,

I am sorry for the delay of this reply.

It seems like I cannot login to your site as it returning me with the following error upon logged in,
Warning

Unable to connect to LDAP server


By the way I've tried to view your site in mobile but it seems like everything seems to be working fine from my end. Check my screenshot here for for your easysocial dashboard view, http://screen.stackideas.com/2015-06-15_1132.png

Am I missing something here? Please advise.
Ezrul Fazwan
·
Monday, 15 June 2015 11:33
·
0 Likes
·
0 Votes
·
0 Comments
·
You will need to be logged in to see the problem. Sorry. The password might have been wrong in my first post. correct login details are attached to this post.

Thank you
camron
·
Monday, 15 June 2015 12:30
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Camron,

I've tried to view your site while logged in and it seems like the top bar is no longer appear in mobile view. Check my screenshot here, http://screen.stackideas.com/2015-06-15_1749.png . May I know what phone model you are using and in what browser?

Please advise.
Ezrul Fazwan
·
Monday, 15 June 2015 17:50
·
0 Likes
·
0 Votes
·
0 Comments
·
I removed the top bar yesterday before you responded, but I am still having trouble with the bottom bar.
I have been testing on iphone and samsung android.
camron
·
Monday, 15 June 2015 19:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Camron,

I am sorry for the delay of this reply.

I think we are not in the same page here. From my end (pc browser, and my android mobile phone) the bottom bar is not appearing. You can refer from my screenshot in my previous reply. Not really sure how to make it appear
Ezrul Fazwan
·
Tuesday, 16 June 2015 16:18
·
0 Likes
·
0 Votes
·
0 Comments
·
I am sorry for the confusion. I don't know what android device you are using but the menu is visible on all my Android and IOS devices.

I have the following devices for testing:
galaxy tab,
galaxy s5
galaxy express
ipad air
iphone 6

Please tell me what device you are using. Also please use this emulator for reference
http://www.mobilephoneemulator.com/

I used the emulator to create the attached screenshots.
(you can see in the screenshots exactly what browser specs were used)

Thank you
camron
·
Wednesday, 17 June 2015 01:48
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello camron,

I tried to access your site (http://yoursite.com/) but its return an error message:
Error displaying the error page: Application Instantiation Error: Could not connect to MySQL.

From your screenshots, I believed that there is a CSS z-index issue conflicts, between our component, and your bottom toolbar.

Please lets us know when your site is back online, I will inspect this issue further.

Please advice, thank you.
Ikram Hakimi
·
Wednesday, 17 June 2015 11:54
·
0 Likes
·
0 Votes
·
0 Comments
·
the site is back online. I would much appreciate it if you removed my link from your last post.
I'm sorry. I was updating cpanel and WHM. that caused the site to be offline for a few hours.
camron
·
Thursday, 18 June 2015 01:00
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you for removing my link. I am not sure how to change z-index for the toolbar.
I have tried this code in custom.css file.

#rt-top-surround position{

position: relative;

z-index: 2;

}

#rt-transition{

position: relative;

z-index: 1;

}


I also tried

#rt-top-surround position{

position: relative;

z-index: 28;

}

#rt-transition{

position: relative;

z-index: 27;

}



the site has been back online for a few days now. Please take one more look.
camron
·
Saturday, 20 June 2015 11:17
·
0 Likes
·
0 Votes
·
0 Comments
·
Yayy. Got it working. I was able to add z-index: 9 as custom css code to my module and now my menu floats on top again like it used to. Thanks for all the help. Issue solved.
camron
·
Sunday, 21 June 2015 04:22
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Camron,

Great! Glad that your issue has been resolved now.
Ezrul Fazwan
·
Monday, 22 June 2015 12:05
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post