Having a website that receives traffic from different countries, including Portugal and other non-English speaking places, I decided to add a translation option. However, I encountered an issue with Google's translate feature which displays a banner at the top asking if you meant to translate the page every time it loads. This becomes frustrating as the banner covers my main navigation links, making them inaccessible.
I tried using position absolute to make the navigation drop down to fit the space occupied by the Google banner, but then it doesn't stay fixed at the top as intended. So, my question is: How can I keep the navigation bar at the top even when scrolling, while ensuring that it moves down when necessary for all links to be visible?
While I welcome creative solutions, I believe there should be a simple fix that I am overlooking. Here is the CSS code for the navigation banner:
#topbar{
overflow:hidden;
z-index:999;
padding-left:20px;
padding-right:20px;
padding-top:5px;
position:fixed;
text-align:center;
width:100%;
height:50px;
background-image:url('http://www.wallgc.com/images/2012/11/black-minimalistic-dark-pattern-wall-textures-silver-HD-Wallpapers.jpg');
background-color:#232323;
margin-left:-20px;
box-shadow: 0px 10px 10px -5px rgba(0,0,0,.6),inset 0px -1px 5px 0px rgba(0,0,0,.5);
}