When the ribbon is expanded, by default, the entire title area disappears. This is usually something that clients dislike, so making it always visible is something I usually have to do.

Ribbon collapsed:

Ribbon expanded, the title area is gone:

So we need to override the declaration that hides the ribbon.

How to do this? Add this rule to you CSS:

#s4-titlerow { 
    display: block !important; 
}

Now the title area is visible. When the ribbon opens it "pushes" the title area down: