WordPress.org

Forums

Style Sheet to Fix Header (13 posts)

  1. catceefer
    Member
    Posted 1 year ago #

    I am trying to create a fixed header on my site using CSS. I have managed to do this, but the actual body of the page starts at the very top of the screen as well, meaning that the header obscures part of the page.

    How can I force the body to start where the header ends? If it has any bearing, I am using the theme Parabola.

    Thank you.

    James.

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    add a top margin to the style of the container.

    https://wordpress.org/support/theme/parabola/

  3. catceefer
    Member
    Posted 1 year ago #

    Thank you.

  4. catceefer
    Member
    Posted 1 year ago #

    alchmyth,

    I have had a look at the link that you suggested, but I cannot find anything that helps. Is there a simple snippet of code that I can add into the CSS sheet to fix the header in place?

    Thank you.

    James.

  5. Andrew
    Forum moderator
    Posted 1 year ago #

    How did you create the fixed header to begin with?

  6. catceefer
    Member
    Posted 1 year ago #

    The header is part of the original theme (Parabola). I wish to fix it so that it does not scroll with the page. This is a link to the site: http://www.craftedcopper.co.uk/wordpress/

    Ignore the colours and so forth: I am just trying to get the structure right before migrating content from a functioning site.

    Below is the code from the CSS for the site
    [Redacted - If you want to post large excerpts of code (or entire files) use PasteBin]

  7. Andrew
    Forum moderator
    Posted 1 year ago #

    So you were saying you already got the header "fixed" (position) but there was an issue with the positioning of the content, how did you fix position the header?

  8. alchymyth
    Forum Moderator
    Posted 1 year ago #

    had a look at the link that you suggested

    the link is just to the support section of your theme, where theme related questions should best be asked.

    right now the header seems not to be fixed;
    once it is fixed, for instance with:
    #header-full { position: fixed; top: 0; width: 100%; }
    you could push the content down with something like:
    #main { margin-top: 210px; }

  9. catceefer
    Member
    Posted 1 year ago #

    Thank you for your replies. When I did manage to fix the position, I copied a snippet of code from somewhere: I have since deleted it and cannot recall the source.

    I shall try the suggestions given to see how I get on.

    Regards,

    James.

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    Where did you add the snippet of code?

  11. catceefer
    Member
    Posted 1 year ago #

    Andrew:
    I pasted it into the bottom of the "Edit CSS" screen.

    Alchmyth:
    That has worked perfectly. Thank you.

    I now have a follow on question, though. As I scroll down the page, the text all disappear "under" the header, as anticpated, until the input box for comments comes up at the bottom. For some reason, the input box goes over the header, not under it. Any thoughts?

    Regards.

    James.

  12. alchymyth
    Forum Moderator
    Posted 1 year ago #

  13. catceefer
    Member
    Posted 1 year ago #

    Thank you. I shall have a play.

    Regards,

    James.

Topic Closed

This topic has been closed to new replies.

About this Topic