Question

I’m working on a pretty minimal site with a fixed bottom navigation bar and centered content. I’m having problems with the content shifting a little bit inbetween every page.

Here’s the site:
http://imsja.com/test/index.html

and the CSS: http://imsja.com/test/ims.css

Index, Philosophy, Services, and Contact Us page are uploaded so far. On Philosophy and Services, I know the content is shifting because of the scroll bar. But the content also shifts inbetween the Index and Contact Us pages (neither of which have a scroll bar).

Any suggestions?

Answer 1

It’s because you have different style on “active” links. To prevent shifting, you should give a fixed width to #navigation > a elements:

#navigation>a{
    display: inline-block; // width won't work on anchors without this
    width: 150px;          // just for example
}

In addition, “PORTFOLIO”, “TEAM”, and “WHAT’S NEW” page do not have active style applied on the corresponding anchors, I think you should fix them first.