Static/Fixed/Scrolling Header

  • Resolved scyberia

    (@scyberia)


    13 years, 1 month ago

    I have a website:

    https://blog.scyberia.tk/

    I am trying to edit the CSS/header file so that the header stays fixed just like this website:

    https://www.lokeshdhakar.com/

    I’ve looked around the support forums and tried some code (example) but the problem is the title and tagline stick to the very left of the page and the page links stick to the very right of the page.
    I want them in the same place they are now, but they should scroll with the page.

    I’m using the theme Foghorn.

    Any ideas?

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

  • Try the following CSS and see if it works for you.

    div#main {
    padding-top: 100px;
}

header#branding {
    position: fixed;
    width: 1090px;
    background-color: #f2f2f2;
}
    Thread Starter scyberia

    (@scyberia)

    Thanks for helping me!
    The code mostly works. The only problem is that on small screens the “Downloads” link at the end of the header does not show, and scrolling to the right doesn’t work.

    Is there a way to fix this? If not, I guess I will have to be happy with this…

    Thread Starter scyberia

    (@scyberia)

    Great! Fixed it.

    Here’s the code I used:

    div#main {
    padding-top: 120px;
}

header#branding {
    position: fixed;
    width: 1110px;
    background-color: #f2f2f2;
}

    Actually I have another question. The Foghorn theme is mobile-friendly so I don’t use any mobile extensions. The problem is that the pages links don’t wrap, so the Downloads link is cut off.

    Help? If not it’s okay…just wondering.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Static/Fixed/Scrolling Header’ is closed to new replies.