CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ryan Saxe
Ryan Saxe

Reputation: 17869

Translate bar scroll fix

I have a website, and I get a fair amount of traffic from portugal and many other places that speak languages other than English, so I wanted to put a translate option, which I have now done.

My issue is that with googles translate option, it creates a top banner asking if you meant that language, and clicking out of it (at least for me), un-translates the page. This is annoying, especially because, as you can see, the banner covers my main navigation banner, so you cannot see what links there are.

With position absolute, the navigation banner, along with the rest of the body, will drop down to fit in the google banner, but then the navigation banner does not stay at the top like I want it to.

question: how can I make it so that it stays at the top during scrolling, but moves down when necessary so that the links can be viewed?

note: creative solutions are fine, but I feel like there should be a simple fix that I am missing.

Just in case people want to see the css for the navigation banner, here:

#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);
}

Upvotes: 0

Views: 2159

Answers (1)

redditor
redditor

Reputation: 4314

I'm afraid I cannot access your page due to my work proxy settings, but perhaps your issue would be solved with this link?

http://joshua.doodnauth.com/blog/2011/03/google-web-translator-frame-bar/

Upvotes: 2

Related Questions