Viewing 6 posts - 1 through 6 (of 6 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

    November 28, 2025 at 7:27 am #1491916
    Ismael

    Hi,

    Thank you for the inquiry.

    Have you tried selecting standard screen sizes instead of manually adjusting the screen width or height? We made some adjustments to the css code and re-added it in the Quick CSS field.

    @media only screen 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.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
        padding-top: 50px;
        margin-top: 50px !important;
    }

    .responsive #header_main .container {
         height: 50px !important;
    }

    .responsive #top .logo {
         height: 48px !important;
    }

    #top #menu-item-search {
        top: 4px;
    }
}

    (Tablet):

    Screenshot-2025-11-28-at-2-25-50-PM

    (Phone)

    Screenshot-2025-11-28-at-2-26-12-PM

    Best regards,
    Ismael

    November 29, 2025 at 10:39 am #1491939
    mistermagoo8691

    > Have you tried selecting standard screen sizes instead of manually adjusting the screen width or height?
    What do you mean with that? Selecting where?

    BTW, your CSS is working very well, thanks Ismael. For me it’s always a mistery how you can understand so quickly what are the parts you need to modify :-)

    I just had to add a small thing: the menu containing the search button and the burger was not vertically centered.
    I had to add this one below, I am adding it for reference in case anyone else is reading this post. I cannot understand why it was working for you in the screenshot above…

    	nav.main_menu {
    	height: 100% !important;
	}

    Transparence is not there… but who cares.

    Thanks Ismael very much!
    Bye,
    A.-

    November 29, 2025 at 2:52 pm #1491944
    Mike

    Hi,
    Glad that Ismael could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Header size changes when switching to “tablet” and “mobile” sizes’ is closed to new replies.