
-
AuthorPosts
-
September 14, 2021 at 3:47 pm #1320930
Hey there,
I’ve just noticed, that the (set to transparent) header menu section is displayed as block between a width from 1068 and 1289 px. It then pushes down the header images, instead of laying transparent over the images.
These are my header related custom settings:/*sticky menu mobile*/
@media only screen and (max-width:767px) {
.responsive #top #wrap_all #header {
position: fixed !important;
}
}/*
header menu background transparency */.av_header_transparency{
background-color: rgba(255,255,255,0.7) !important;
}@media only screen and (min-width: 767px) {
.av_header_transparency{
background-color: rgba(0,0,0,0.3) !important;
}
}so the media query gets in conflict with another setting i cannot locate.
Thx for your help.
Tim
September 15, 2021 at 7:21 am #1320992Hi Tim,
I checked your site in Chrome, but I can’t see any problems there. Could you post a screenshot of the problem you are seeing on your end, and let us know in which browser you are seeing it please?
Best regards,
RikardSeptember 15, 2021 at 8:46 am #1321003HI Rikard,
thanks for your quick reply. I added the screenshots. have a look at the filenames, describing the status.
Tested it on Chrome 93, Firefox 92 and Safari 14, it’s always the same behaviour…September 16, 2021 at 5:34 am #1321133Hi,
Thanks for the screenshots. I’m still not able to reproduce those results on my end though, please see screenshot taken at 1100 pixels in Chrome, in private. I checked in Firefox and Safari as well, with the same results.
Best regards,
RikardSeptember 16, 2021 at 8:20 am #1321159Ok, then it might be a caching problem. I’ll try from different networks then. Nevertheless many thanks.
September 16, 2021 at 9:01 am #1321162@Rikard,
No difference via a Hotspot connection and cache cleared browsers.
Just saw, that i have different pixel informations on different screen (Chrome) sizes. The 1068 and 1289 px were displayed on a Dell with 1920×1080 px. on my 13″ Macbook, its from 754 to 973 px. I took the measures that are displayed, when chrome’s developer console is opened.Could you please try also to adjust the width of your browser manually? At one point, the header menu turns dark gray and the header image jumps below the menu.
September 17, 2021 at 6:01 am #1321313Hi,
Thanks for the update, I see the problem now on my end too. I was checking the screen sizes which you indicated in the title of your post. Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardSeptember 17, 2021 at 9:28 am #1321345Hi Rikard,
glad you saw it now, too.Link is in Private.
Thx and have a nice weekend
September 19, 2021 at 5:40 am #1321487Hi Tim,
Thanks for that. I’m not sure exactly where you have added the code you initially referred to, so I added it again at the top of Quick CSS, but with an edited media query value:
@media only screen and (max-width:1024px) { .responsive #top #wrap_all #header { position: fixed !important; } } /* header menu background transparency */ .av_header_transparency{ background-color: rgba(255,255,255,0.7) !important; } @media only screen and (min-width: 1024px) { .av_header_transparency{ background-color: rgba(0,0,0,0.3) !important; } }
That seems to be working on my end, could you check on your end as well please?
Best regards,
RikardSeptember 20, 2021 at 10:00 am #1321587Hello Rikard,
thank you, seems to work properly on my side, too. Thank you very much!
Problem is solved for me and the ticket can be closed.
Best regards,
TimSeptember 21, 2021 at 2:33 pm #1321774 -
AuthorPosts
- The topic ‘Strange behaviour of Header menu between 1068px and 1289 px width’ is closed to new replies.