We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can i fix the tab overlapping when i change the width of the url bar with #urlbar-container [focused]?

  • 7 replies
  • 4 have this problem
  • 1 view
  • Paskiausią atsakymą parašė derek89

more options

I want to create for myself the most minimalistic browser experience as possible and i've put the most used features in the title bar. For purposes of space i had to fix the width of the url bar to a minimum and my intention is to increase it to a fixed width only when #urlbar-container [focused]. The problem is that #urlbar-container will overlap the existing tabs instead of shrinking their space, making it look really bad. It looks wonderful with #urlbar-container:hover, but i can't use that since whenever i want to refresh the wesbite using the button the width of the container will increase moving the button from the place i had the mouse in the first place to click it.

Fixed width of the url bar when #urlbar-container is not focused:

http://imagizer.imageshack.us/v2/800x600q90/829/xo4o.png

Fixed width of the url bar when #urlbar-container [focused]:

http://imagizer.imageshack.us/v2/800x600q90/34/8o36.png

This is the css i have for the url bar at the moment:

#urlbar-container {max-width:225px!important;}
#urlbar-container {min-width:225px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar-container [focused] {max-width:500px!important;}
#urlbar-container [focused] {min-width:500px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar {border-top-right-radius:10px!important}
#urlbar {border-bottom-right-radius:10px!important}
I want to create for myself the most minimalistic browser experience as possible and i've put the most used features in the title bar. For purposes of space i had to fix the width of the url bar to a minimum and my intention is to increase it to a fixed width only when #urlbar-container [focused]. The problem is that #urlbar-container will overlap the existing tabs instead of shrinking their space, making it look really bad. It looks wonderful with #urlbar-container:hover, but i can't use that since whenever i want to refresh the wesbite using the button the width of the container will increase moving the button from the place i had the mouse in the first place to click it. Fixed width of the url bar when #urlbar-container is not focused: http://imagizer.imageshack.us/v2/800x600q90/829/xo4o.png Fixed width of the url bar when #urlbar-container [focused]: http://imagizer.imageshack.us/v2/800x600q90/34/8o36.png This is the css i have for the url bar at the moment: <pre><nowiki>#urlbar-container {max-width:225px!important;} #urlbar-container {min-width:225px!important;} #urlbar-container {transition:0.7s!important;} #urlbar-container [focused] {max-width:500px!important;} #urlbar-container [focused] {min-width:500px!important;} #urlbar-container {transition:0.7s!important;} #urlbar {border-top-right-radius:10px!important} #urlbar {border-bottom-right-radius:10px!important}</nowiki></pre>

Modified by cor-el

All Replies (7)

more options

What method (code) did you use to get the Tab bar displaying in the space used for the Navigation Toolbar (location bar)?

The Tab bar should be displayed above the Navigation Toolbar.


Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).

  • Do NOT click the Reset button on the Safe Mode start window.
more options

I did it with this addon: https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer/

I modify the CSS through this addon: https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=search

I have the default theme set and turned off hardware aceleration, but the bug still persists. I can't use Safe Mode since i'm doing this customisation through addons.

more options

I still don't know how to solve this customization problem.

more options

Try this code:

#urlbar-container {max-width:225px!important;}
#urlbar-container {min-width:225px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar[focused="true"] {max-width:500px!important;}
#urlbar[focused="true"] {min-width:500px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar {border-top-right-radius:10px!important}
#urlbar {border-bottom-right-radius:10px!important}
more options

The same happens:

When not in focus: http://oi59.tinypic.com/28armoj.jpg

When in focus: http://oi59.tinypic.com/2zdq0yf.jpg

more options

Have you tried asking about that in the CTR support thread?
http://forums.mozillazine.org/viewtopic.php?f=48&t=2773133

more options

I tried, but I don't think the mods allowed it to post.

Edit: NVM, it just took them a while.

Modified by derek89