Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • November 25, 2025 at 10:15 am #1491785
    mistermagoo8691

    Hi folks.
    My header behaves rather strangely depending on the screen size: I would like to harmonize its behavior.

    I’ve fixed its size to 50px in the theme configuration. However. when the screen size changes, I see the following changes:

    screen width < 990px and >=768px:
    1) The header height increases from 50px to 90px.
    2) The ‘transparent’ header when on top of the homepage becomes ‘opaque’.

    screen width < 768px:
    1) The height decreases from 90px to 80px.
    2) The header stays ‘opaque’ on top of the homepage.

    I couldn’t find anything related to this in the theme configuration.
    I’ve already used some CSS I found here in the support forum to make the burger menu appear below a specific size (1300px). Another change I applied to the header is the one suggested by @Ismael to keep the logo vertically centered. No other changes are affecting the header, in my CSS file.

    How can I have the header keep the same height of 50px & “behavior” (=transparency when on TOP of the homepage, then opaque when scrolling down) on all screen size?

    Thx in advance. Bye!

    November 26, 2025 at 6:34 am #1491827
    Ismael

    Hey Angelo,

    Thank you for the inquiry.

    This sets the header height to 90px on tablet view:

    .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a,
    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
        height: 90px;
        line-height: 90px;
    }

    To override it, you can add this css code:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a,
    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
        height: 50px;
        line-height: 50px;
    }

    .responsive #top #main {
        margin-top: 50px !important;
    }
}

    Let us know the result.

    Best regards,
    Ismael

    November 26, 2025 at 6:50 am #1491828
    mistermagoo8691

    Thanks Ismael, but I don’t have the 1st CSS code in my style.css file… what do you mean when you say “This sets the header height to 90px on tablet view”? You mean “…in the standard CSS of the Enfold theme”?

    My request is to have the same height of the header (50px) to all screen sizes, and always transparent on top (if possible)…

    Anyhow: CSS #2 of your email is fixing between 768px and 989 onlypx, but it is not transparent.

    At < 768px no changes, of course.
    If I remove the “min-width: 768px” of your CSS, the header size is still 80x, and in addition to that, the Burger menu is not centered anymore: see here

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.