Narrowing the logged-in header (part 1 of 2)

Jtring

Back in August when SmugMug rolled-out the new extra wide logged-in header, I posted that I had written some CSS to narrow it. At the time, I expected SmugMug would respond to the many complaints and offer their own narrower version. (See the New Improved Navigation and Photo Viewing Experience thread in this forum.) Since that's not happened and there's been another round of complaints, in part two of this message, I've posted CSS code narrowing the header. It adjusts the header on the main Photo Site display but does not touch the Customizer or Organizer. The strategy is threefold: narrow the header line and section bar, simplify their contents to fit and present a unified appearance, and move the contents of the status line up into open middle space of the header line if there is room.

Terminology. The logged-in header, as discussed here, has 3 parts:
--- 1) The header line with the SmugMug logo at the left and the account button at the right
--- 2) The section bar, which has different entries for pages, folder, and galleries
--- 3) The status line, which flags unlisted and password-protected pages

There are lots of comments inserted in the code so those with some understanding of CSS can follow along and make their own modifications. Insert this either into a CSS block on the Entire Site part of your template or the CSS section of your theme. Let me know if you try this and it works ... or doesn't! If it doesn't work, PM me a screen shot of the damage so I can see what went wrong.

I also have code for adjusting the colors, but it's not quite ready for general sharing yet. Let's see how this first part goes.

(Code follows in Part 2. Dgrin limits the size of a posting and everything in one place goes over the edge. This approach also keeps the code separate from any discussion.)