Post by keithdarr » Tue Dec 05, 2023 11:35 pm

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
Last edited by keithdarr on Wed Dec 06, 2023 7:04 am, edited 1 time in total.

New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US

User avatar
Guru Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US

Post by keithdarr » Wed Dec 06, 2023 12:19 am

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 */
}

New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US

Post by JNeuhoff » Wed Dec 06, 2023 12:23 am

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


User avatar
Guru Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by keithdarr » Wed Dec 06, 2023 12:26 am

I might have been messing with it at the time you looked. Sorry. I have been at this for a while and forget that others are helping. I put

New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US

Post by keithdarr » Wed Dec 06, 2023 12:30 am

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: Image. ImageImage

New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US

Post by keithdarr » Wed Dec 06, 2023 2:30 am

Desktop Firefox doesn't do the 'sticky' thing for the Top, that I am trying to achieve. The mobile version of Firefox acts with the z-problem and does the sticky thing I want.

New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US

Post by JNeuhoff » Wed Dec 06, 2023 6:28 am

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


User avatar
Guru Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by keithdarr » Wed Dec 06, 2023 6:39 am

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.

New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US

Post by keithdarr » Wed Dec 06, 2023 7:01 am

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]

New member

Posts

Joined
Wed Nov 29, 2023 12:54 pm
Location - Minneapolis, Minnesota, US
Who is online

Users browsing this forum: No registered users and 3 guests