So I'm trying to add a custom logo to the backend top left using the /backend/system/settings/update/october/backend/branding#primarytab-backendlangbrandingstyles page. However, when I add the custom CSS it doesn't really work good and it breaks the nav (esp. the scrolling feature). This is what I'm currently using.

.nav.mainmenu-nav::before {
  content: url('path/to/my/svg');
  width: 12%;
  height: 100%;
  margin-top: 7px;
  left: -1%;
  position: fixed;
}
.nav.mainmenu-nav > li:first-child {
    padding-left: 20%;
}

How do I make it work so that it fits well without breaking the nav scroll feature?

It kinda breaks the nav in the sense that when I put the logo css, it doesn't display the ending portion of the navigation and when I put my mouse over the logo, the nav items run to the right and the ending portion appears with the horizontal scrollable thing working--it's the weirdest thing.

Last updated 3 years ago

Ah, this is more of a premium support question... :-)

Yes, you've thrown out all the calculations for the drag scroller when you add the padding. Your proposed code almost works, however, it's a bit hacky. The most reliable approach might be to inject the logo using JavaScript

daftspunk said:

Ah, this is more of a premium support question... :-)

Yes, you've thrown out all the calculations for the drag scroller when you add the padding. Your proposed code almost works, however, it's a bit hacky. The most reliable approach might be to inject the logo using JavaScript

Thank you for the input :)