blog header modification

[14mC4]

Anyone got a way to possibly make this below possible? I want to make the header logo bigger and move it to the number 2. I tried a couple CSS modifications w/ Partials but, cant seem to get it correct. Pretty much using most defaults. Any help is appreciated.

[squidfunk]

I took the time and fiddled around, and yes, it's possible:

@media (min-width: 76.25em) {
  .md-header__button.md-logo {
    position: absolute;
    top: 0;
    margin-left: -4.4rem;
  }
  .md-header .md-grid {
    padding-left: 4.8rem;
  }
  .md-header__button.md-logo svg {
    height: 3.6rem !important; /* <-- see comment below */
  }
  .md-header__title {
    margin-left: .8rem !important; /* <-- see comment below */
  }
}

Result:

It doesn't look very nice with our logo, though, but might work for others. Note that I used !important to simplify overriding, as this became more complicated in v8. In v9, those !important modifiers can be dropped again. It can also be done without them already, but it's more complicated, so using them and dropping them in v9 is simpler.

Also note that for this to work, navigation.tabs.sticky must be enabled. It will not work when tabs are hiding.

[14mC4]

gotcha. I must have my CSS all messed up since that doesnt do anything for me.

[14mC4]

tried to

[14mC4]

got it to move to the left but, the size doesnt seem to scale.