-15

I'm okay with the new nav bar. Even if he's a little fat.

enter image description here

I'm also okay with the sticky (get your mind out of the gutter). But these two don't go together like chocolate and peanut butter. The nav bar's chubby butt blocks too damned much of the screen.

enter image description here

How about a happy medium? When you're at the top of the page, you get the Sumo version of the nav bar, but when you start to scroll down, you get a more petite version?

enter image description here

This might also be satisfying to those who wish to go back to the smaller nav bar.

11
  • 14
    A nav bar that changes size is worse than a fat one. Commented Feb 16, 2017 at 17:11
  • 5
    TIL if you're fat never loose weight :/
    – user1228
    Commented Feb 16, 2017 at 17:19
  • @Will Supported :-) Commented Feb 16, 2017 at 17:23
  • Its the american way. Everything must get fatter, not skinnier.
    – user4639281
    Commented Feb 16, 2017 at 17:46
  • 6
    The navbar isn't fat. It's jolly. Stop shaming it. #timetotakeastand
    – Bart
    Commented Feb 16, 2017 at 18:32
  • I disagree with the proposed change, but enjoy the humor of this post.
    – code11
    Commented Feb 16, 2017 at 18:53
  • There's already a setting to unstick the nav bar.
    – BSMP
    Commented Feb 16, 2017 at 18:55
  • 5
    @BSMP well, thanks for pointing out something that has nothing to do with the question.
    – user1228
    Commented Feb 16, 2017 at 19:45
  • 5
    In one post, you managed to 1. assume the navbar's gender, 2. body shame it, and 3. try to coerce it into conforming with society's expectations, pretending to be one thing one second, another the next. Nicely done.
    – Pekka
    Commented Mar 2, 2017 at 23:22
  • @TinyGiant *cough* Apple *cough*
    – Braiam
    Commented Mar 3, 2017 at 2:13

2 Answers 2

-1

I've created a Stylus file to format the header similar to what Will suggested here. If you don't use Stylus, then just copy the updated CSS classes and settings to your favourite Browser Addon.

.top-bar {
  height: 30px;
  margin-top: 0px;
}

.top-bar .-list {
  height: 25px !important;
}

/* header cell size for links/hover effect */
.top-bar .-link {
  line-height: 25px !important;
  height: 25px !important;
}

/* hide logo */
.top-bar .-logo {
  display: none !important;
}

/* reduce cell size of profile */
.my-profile {
  padding: 0px 10px !important;
}

/* size of searchbar */
.top-bar form#search input.s-input {
  height: 25px !important;
  padding: 0px !important;
  padding-left: 36px !important;
}

/* round indicator badges (review count or reputation) */
.indicator-badge {
  font-size: 0px !important;
  padding: 2px 0px !important;
  width: 9px !important;
  min-width: 9px !important;
  height: 9px !important;
  max-height: 9px !important;
  min-height: 9px !important;
  border-radius: 5px !important;
  top: 14px !important;
}
.top-bar .secondary-nav .-link .indicator-badge:not(._regular) {
  top: 3px !important;
  right: 8px !important;
}

/* reduce size of red review queue alert indicator */
.-link._danger-indicator::after {
  width: 5px !important;
  height: 5px !important;
  top: 14px !important;
}

/* reduce size of search bar button */
.top-bar .btn {
  height: 20px !important;
  font-size: 68% !important;
  padding: 1px 8px !important;
}

/* reduce padding of body */
.container {
  margin-top: 30px !important;
}

/* reduce padding of review bar */
.review-bar {
  top: 30px !important;
}

/* reduce size of "NEW" button in header */
.top-bar .-feature-notice.unread-feature-notice span {
  height: 15px !important;
  padding: 0px 8px 0px 8px !important;
  font-size: 8px !important;
}

/* reduce size of search button in header */
.top-bar._search-open .searchbar .btn-topbar-primary {
  height: 20px !important;
  min-height: 20px !important;
}

/* remove "products button */
.top-bar .-marketing-link {
  display: none !important;
}

I currently looks like this:

example of new top bar

As you can see, I've kept the avatar and badges in. If you like to remove it, just add:

.my-profile {
    display: none !important;
}

Feel free to update these settings here if you like.

5

The site Ars Technica does something similar on mobile; its giant logo collapses to make way for smaller navigation icons at the top.

enter image description here enter image description here

Analogous to what you're suggesting here, I personally find myself disliking the sudden collapse there and also this suggestion for the same reasons - namely, moving an element on the screen takes my focus away from what I'm truly interested in, even if for a split second.

The issue that you're describing here is that you feel that the bar is in the way if it's left in hover mode. This isn't untrue; it does sort of jut out a bit. It would look even stranger if the bar had a black background, which would make your suggestion only ever so slightly more appealing.

Perhaps this is already a solved problem in that we can unstick the top nav, so it always just stays at the top.

2
  • Your final paragraph is no longer correct
    – PM 2Ring
    Commented Jan 17, 2022 at 19:08
  • 1
    @PM2Ring: It was back in '17. I don't see any value in updating now.
    – Makoto
    Commented Jan 18, 2022 at 16:54

You must log in to answer this question.