small issue on header

  • Hi all.

    This time I’m facing a small issue on header (TwentySeventeen) caused by the responsive layout.
    I don’t put site title and wording in header (display:none;), and only a logo.
    The logo is made with an animated gif which acts only one time when you open the homepage.
    The animated gif changes height: starts with one line of wording and at the end of action becomes three lines wording: then it stops with the three lines.
    To explain better: the logo is made of three lines which in anim appear one by one, then (after first time anim) it remains permanently displayed in its three lines.

    This means that the height of the gif is variable from start to end.
    I added some white space on header to match the final height (no problem since there are not title and wording).
    Below branding there is the top menu, in same background color of branding header.

    —
    Well: when you change page the header has a very fast height variation … for a moment it is short (just below the first step of gif height), then becomes normal height (included menu banner).
    When pages are preloaded or fast load this issue is not perceptible, but when a page is slow to load this bad effect takes also 2 seconds, with a very bad result.

    —
    Tried several css solutions, but no good result: sticky header, pos fixed or absolute, change header height with percentage >> the problem is unchanged.

    Since it depends on the fluid layout, the only one solution is to change the relative unit (height % or regulated by height content with padding) with fixed:
    if you write the exact height of the div (in my case 188 px incl banner and menu) all works perfectly.

    But this could be a conflict problem for rest of responsive layout:
    I also thought to fix with media queries but it’d be a crazy list of cases.

    Only I have to try to add some wording, declaring their fixed line-height, and with “visibility:hidden” just to keep a fixed “blank space” in the bannner.

    Do you have any other solution? Thanks and sorry for long explanation.

    Mauro

Viewing 7 replies - 1 through 7 (of 7 total)

  • It would help if you provide a link to your website.

    Thread Starter Mauro Vicariotto

    (@mrosfy)

    Thank You Davvod,
    but (sorry) bo link at the moment,
    because I’m “pre-building” this site offline with XAMPP (the Apache tool for php and MySql local ambient).
    If you want I can send you some codes (but useless, I guess) and a screen movie of the bad effect.
    Or?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can use a sandboxing tool like jsFiddle to show us the issue

    Thread Starter Mauro Vicariotto

    (@mrosfy)

    OK thank you will do tonight

    Thread Starter Mauro Vicariotto

    (@mrosfy)

    While I prepare the jsFiddle probably I understood the possible cause of my problem:
    the animation logo (gif) is 1920 x 270 (with background, not transparent).
    The theme is Twenty Seventeen with Advanced Twenty Seventeen Child.
    To cover the whole banner with the gif, site branding is empty, no jpg for logo, and set only the gif as “header background-image”.
    No site title, no tagline, no logo image, only background of the banner.

    As consequence the class “.site-branding .wrap” is empty: checking (just add 1px color border to the div) you see that the div is full width with zero height.
    I’m not sure, but being zero height (not fixed height) at every page change it plays as an “elastic” going to zero and then enlarging for the background-image set.

    This because being the banner responsive all is based on padding of the div: if the div is empty the div dimension is zero: so at page change “it goes to zero and then keeps the hight of the background”.

    What’s your opinion?
    If so I could solve simply adding a transparent image as logo, dummy ricky that fixes its height.

    Thank you for your prompt reply.

    Thread Starter Mauro Vicariotto

    (@mrosfy)

    Update:
    I added logo image (a dummy white in same height of the animated gif background (the real logo, with animation).
    Then added the css code:
    .site-branding .wrap .custom-logo-link {visibility:hidden!important;}
    to make not visible the white layer covering the background gif.

    It seems working but yet tested well: now the area div for .site-branding has some correct height, so I cancel the code line that fixes 188 pixels and let’s see what happens (my hope: the invisible dummy “holds” the header height as a sort of “transparent placeholder”) .. what do you think?

    Thread Starter Mauro Vicariotto

    (@mrosfy)

    conclusion: decided for a mix responsive and adaptive:
    media queries for fixed heights and rest responsive …
    WP reads the animated gif at its initial height, but the height changes at mid animation

    I repeat that WP is a great instrument to make the things quickly,
    but too strict indeed: it is made for those guys that want a website without touching details …
    when you start (as me) to modify all, it is crazy, faster to make a web starting from zero.
    Thanks
    Mauro

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘small issue on header’ is closed to new replies.