WordPress.org

1. scyberia
   Member
   Posted 8 months ago #

   I have a website:

   http://blog.scyberia.tk/

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

   http://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?

2. djr_xr6
   Member
   Posted 8 months ago #

   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;
   }

3. scyberia
   Member
   Posted 8 months ago #

   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...

4. scyberia
   Member
   Posted 8 months ago #

   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.

Reply

You must log in to post.