Firefox Customs

64 readers

6 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago

MODERATORS

[email protected]

MrOtherGuy

Show bookmarks bar when hovering urlbar only (self.FirefoxCSS)

submitted 1 month ago by subhasutra to c/[email protected]

2 comments fedilink hide all child comments

In relation to my previous posts, I am trying to make the bookmark bar show when hovering over the urlbar only instead of the whole nav bar. However replacing the suited elements with #urlbar:hover does not work. What can I do to achieve this?

you are viewing a single comment's thread
view the rest of the comments

[–] MrOtherGuy 2 points 1 month ago (1 children)

#urlbar:hover won't work because bookmarks toolbar is not inside urlbar. You could do this using the :has selector but at this point I think it would probably be best to just throw autohide_bookmarks_toolbar.css out the window and instead write some custom thing.

So, what you could do instead is to go to customize mode and move bookmarks toolbar items out of the bookmarks toolbar and place it directly to the right of the urlbar. Then use some css like this:

:where(#urlbar-container) + #personal-bookmarks{
  position: absolute !important;
  top: 100%;
  width: 100vw;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 100ms ease 400ms;
}
#urlbar-container:hover + #personal-bookmarks,
#personal-bookmarks:hover{
  transform: scaleY(1);
}
#PlacesToolbar{
  justify-content: center;
}
#PlacesToolbarItems{
  max-width: min-content;
  background-color: var(--toolbar-bgcolor);
  border: 1px solid black;
  border-top: none;
}
#navigator-toolbox{
  z-index: 4 !important;
}

You can then just hide disable the bookmarks toolbar.

[–] subhasutra 1 points 1 month ago

Thank you! It works exactly as intended!