I am having a problem, likely after I made it so the top is always sticky at the top of the browser. I made it sticky at the top so people could find their account and I put an email link at the top.
The problem is that the drop down menu for the "My Account" shows up with a bad z-index. It is behind the search and the cart buttons. I tried to put z-index:999; in all kinds of places in the stylesheet but, haven't had any luck yet.
How to I adjust this? It only is doing this on my desktop. It shows up right on my mobile but, that is a smaller screen and it much more responsive at that size. When I make the desktop browser small (simulating a mobile browser) the menu and the search resize and position correctly.
I tried to attach images of my screen but, I wasn't successful.
Keith
What's your website URL?
Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
This is what I put in the stylesheet to make the top sticky: I don't know if it is legitimate syntax:
/* top */
#top {
background-color: #dedede;
border-bottom: 1px solid #c8c8c8;
padding: 10px 0;
margin: 0 0 20px 0;
min-height: 44px;
position: sticky; /* I changed this */
top:0.1px; /* I added this reference point */
/* z-index: 999; */ /* I tried to add this to fix the z-index problem but it didn't help */
}
/* top */
#top {
background-color: #dedede;
border-bottom: 1px solid #c8c8c8;
padding: 10px 0;
margin: 0 0 20px 0;
min-height: 44px;
position: sticky; /* I changed this */
top:0.1px; /* I added this reference point */
/* z-index: 999; */ /* I tried to add this to fix the z-index problem but it didn't help */
}
Your site works fine (though it's quite slow), tested it with FireFox and Chrome.
Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
I put it back and have my hands off of it. Also, I still have not figure out how to put an image in here. I keep adding attachments but when I hit submit, there is no attachment to the message. Let see if this works: 
. 
. This appears to be working for FireFox:
Code: Select all
/* top */
#top {
background-color: #dedede;
border-bottom: 1px solid #c8c8c8;
padding: 10px 0;
margin: 0 0 20px 0;
min-height: 44px;
position: sticky;
top:0.1px;
z-index: 999;
}Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
It looks like the issue may be isolate to desktop Safari. I changed to re-include z-index:999;
I try test in Windows Edge, MacOS Safari, FireFox, and Chrome. On my mobile I test in Safari, Chrome, Firefox and Opera. I don't have a Windows phone available for testing.
I try test in Windows Edge, MacOS Safari, FireFox, and Chrome. On my mobile I test in Safari, Chrome, Firefox and Opera. I don't have a Windows phone available for testing.
I may have got it.... I put this in to Top
/* top */
#top {
background-color: #dedede;
border-bottom: 1px solid #c8c8c8;
padding: 10px 0;
margin: 0 0 20px 0;
min-height: 44px;
position: sticky;
top:0.1px;
-webkit-transform: translate3d(0,0,0);
z-index:999;
}
This seems to be working. But I want to do a little more testing before marking it [SOLVED]
/* top */
#top {
background-color: #dedede;
border-bottom: 1px solid #c8c8c8;
padding: 10px 0;
margin: 0 0 20px 0;
min-height: 44px;
position: sticky;
top:0.1px;
-webkit-transform: translate3d(0,0,0);
z-index:999;
}
This seems to be working. But I want to do a little more testing before marking it [SOLVED]
Who is online
Users browsing this forum: No registered users and 7 guests
