Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Issue with shrinking header

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #176130
    mintdesigner
    Participant

    I am new to responsive websites. I am unable to fix this problem. I have used a sticky header which reduces in height on scroll but because it has a fixed position, the slider below it is hiding behind the header due to which the slider is not at all visible on page load in mobile or small screen devices.

    I tried giving margin top to slider but it shows a lot of gap once u scroll till the end of page and up again. Also it is showing white space at the end of the page which disappears when you open Inspect element. Please help.

    Website link : http://fiveonlineclient.in/project/vizcom/

    #176132
    Paulie_D
    Member

    The slider section should have a top margin equal to the height of your header bar etc….it’s about 120px I think.

    You would need change this margin-top value in your respective media queries as the header changes in height.

    #176135
    mintdesigner
    Participant

    Hey Thanks for the quick reply. I have already tried what you suggested. Once I give margin top of 120px , (in desktop view itself without media queries) it shows that much gap between slider and header once you scroll down and back up.

    Its somehow just not working.

    #176136
    Paulie_D
    Member

    You would need to adjust the margin every time the header changes height whether this due to a media query OR a JS event.

    As this happens on the scroll due to a JS event you would need to add another change into the JS function to adjust it accordingly.

    #176638
    mintdesigner
    Participant

    Hey Thanks. My problem got solved finally.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.