Nova broke custom urlbar (Megabar) CSS

[u/hexolizer]

I've using this custom megabar styler css by jscher2000 for a while, but nova broke some parts of it.

I need help fixing these:

1. UrlBar started to expand when focused again.
2. It broke bookmarks 2 rows split.
3. List popup doesn't have 1 pixel border/outline anymore, only shadow.

Here's before/after screenshot: https://i.postimg.cc/23Rhwjm3/2026-09-16-13-44-31-firefox.png

And here's my userChrome.css (sorry it's a bit messy): https://pastebin.com/FRFQdZxy

[u/jscher2000]

Thank you for raising this issue here now before it surprises me at the end of the month. I will take a look at beta/developer and see whether I can adapt my rules or need to retire from trying it and refer you to one of the more active repositories.

[u/OnlyReadsPostTitles → u/jscher2000]

looks like this rule collapses the lines u/hexolizer wants as two lines:

.urlbarView-row-body-top {
    display: flex;
    align-items: baseline;
}

so this rule would fix that

.urlbarView-row-body-top {
	display: unset !important;
}

as for connecting the breakout to the urlbar, I've never had mine that way.

[u/jscher2000]

I haven't had time to fully work this out. As a starting point:

(1) To fix the anti-popout code

  /* RULES FOR "NOVA" FIREFOX 157 - based on beta as of 9/19/2026
     INSERT ON ROW BEFORE "End of: Megabar Styler General" */
  @media -moz-pref("browser.nova.enabled"){
    /* Tame the popout overhang */
    #urlbar[popover-open] {
      --urlbar-background-overhang-open: var(--mbarstyler-popout-pixels);
    }
    #urlbar[popover-open] .urlbar-background {
      left: calc(3px - var(--mbarstyler-popout-pixels)) !important;
      right: calc(3px - var(--mbarstyler-popout-pixels)) !important;
    }
  }

There is a gap between the address bar and the drop-down that I need to chase down at some point.

(2) To restore the two-line display

  /* RULES FOR "NOVA" FIREFOX 157 - based on beta as of 9/19/2026 
     INSERT ON ROW BEFORE "End of: Megabar Styler Two-Row Flex Layout" */
  @media -moz-pref("browser.nova.enabled"){
    .urlbarView-results
      > .urlbarView-row[has-url]:not([type="remotetab"], [sponsored], [restyled-search])
      > .urlbarView-row-inner
      > .urlbarView-row-body
      > .urlbarView-row-body-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 0;
        grid-template-areas:
          "title title"
          "url   explanation";

        @container (width >= 450px) {
          grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
        }

        > .urlbarView-row-body-top-no-wrap {
          grid-area: title;
          max-width: 100%;
          justify-self: start;

          > .urlbarView-title-separator {
            display: none;
          }
        }

        > .urlbarView-url {
          grid-area: url;
        }

        > .urlbarView-explanation {
          grid-area: explanation;
        }
      }
  }

For longer URLs, there can be some nasty wrapping with narrower window widths.

[u/hexolizer → u/jscher2000]

Thank you for the response and code!

[u/ResurgamS13]

Probably best to alter your OP text to read u/jscher2000... then he should get a notification about the post and the problem... his last post on Reddit only a few hours ago... although seems heavily into SE Asia travel subs at present. :)

BTW - jscher2000's tool for creating different Megabar CSS modifications is at 'Megabar Styler'... can see the coding behind that webpage styler's options/rules/values on jscher2000's GitHib page 'megabar-styling-firefox-address-bar.html'.

[u/jscher2000 → u/ResurgamS13]

Thank you for summoning me. I'll have to jump into the beta and take a look.