Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 14, 2021 at 3:47 pm #1320930

    Tim
    Participant

    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 #1320992

    Rikard
    Moderator

    Hi 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,
    Rikard

    September 15, 2021 at 8:46 am #1321003

    Tim
    Participant

    HI 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 #1321133

    Rikard
    Moderator

    Hi,

    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,
    Rikard

    September 16, 2021 at 8:20 am #1321159

    Tim
    Participant

    Ok, 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

    Tim
    Participant

    @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 #1321313

    Rikard
    Moderator

    Hi,

    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,
    Rikard

    September 17, 2021 at 9:28 am #1321345

    Tim
    Participant

    Hi Rikard,
    glad you saw it now, too.

    Link is in Private.

    Thx and have a nice weekend

    September 19, 2021 at 5:40 am #1321487

    Rikard
    Moderator

    Hi 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,
    Rikard

    September 20, 2021 at 10:00 am #1321587

    Tim
    Participant

    Hello 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,
    Tim

    September 21, 2021 at 2:33 pm #1321774

    Ismael
    Moderator

    Hi,

    Glad to know that the problem has been fixed. We will close the thread now. Please let us know if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Strange behaviour of Header menu between 1068px and 1289 px width’ is closed to new replies.