All of that CSS is meaningless without the HTML it belongs to. Crystal ball says that this code was borrowed from someone else and you don't need three-quarters of it. Crystal ball further says that you don't
understand three-quarters of it. And at first glance it's really horribly complicated CSS if you're not 100% sure what you're doing.
Most dramatically there's
.header .inner .menu ul li.current_page_item a
which means:
this style applies to
links
located within list items of class "current_page_item"
when these in turn are inside any unordered list
which in turn is inside any element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".
not to be confused with
links
located within list items of
some other class (or no named class at all)
when these in turn are inside any unordered list
which in turn is inside any element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".
or
links
located within list items of class "current_page_item"
when these in turn are inside any
ordered list
which in turn is inside any element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".
or
links
located within list items of class "current_page_item"
when these in turn are inside any unordered list
which in turn is
not inside an element of class "menu"
which in turn is inside any element of class "inner"
which, finally, is inside any element of class "header".
or
... et cetera. I sincerely don't believe the page is that dense, so the user's browser is going through a ### of a lot of extra work.
I said "at first glance". Take a closer look and, as far as I can make out, every bit of that CSS only applies to colors of text and/or background. So it isn't even relevant to the question.
Generic answer: Don't start with the code. Start by figuring out, in English, what you want each element to do and what you want the whole page to look like. Once you've got a clear picture, you can work out the code.
menu fixed at top of page
When you say "page" do you mean viewport? You don't need to include
any special CSS to keep things at the top of the whole page; just put it first in the HTML and it will display at the top by default.
Or do you mean that you want some element to stay at the top of the visible window even if the user scrolls down through the rest of the content? Like* the blue strip that's always in the same place
here [w3.org]?
*
Yes, OK, not exactly like. That one's "background-attachment", while here we're probably dealing with a vanilla "position".
