Button works in desktop, works on mobile on only one page but not others... Same exact code. Why?

Please see: http://www.clinica-americas.com/english/index.html  in mobile. The language button on the top right works.

Then go to: http://www.clinica-americas.com/english/about.html  in mobile, the button doesn't work.

When I look at it in Firebug. on the first page I can select the button. On the second page, if I try to select the button, I select the whole div. So there's a problem there somewhere, hopefully we can find it!!
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F IgorDeveloperCommented:
The button is placed in different positions in english and spanish pages.
In english, your button is placed below another content. Check if places are the same and correct them like in spanish.

Otherwise, you should put a "z-index" on that button link to ensure that is clickable. Also check the "col" classes assigned.

<a href="/about.html"  style="z-index:999"><img src="images/espanol.png" alt="espanol"></a>

Open in new window

Melody ScottAuthor Commented:
HI, I added the z-index here, but the button still doesn't appear to work: http://clinica-americas.com/about.html

Thanks.
F IgorDeveloperCommented:
Where do you want to put the button in mobile view? When you change different resolutions it's paced in different points.

The  code appears to be broken when you include the language button, so the container is misplaced before the navbar and it cannot be clicked.
Check first that you are not breaking some DIV tag (opened and closed in the right place), and check it in every page you added that button.

If you want to keep the header and lang you need to enclose in a <div class="row" >...</div> the "first" and "lang" divs, or try something different.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Melody ScottAuthor Commented:
ok, thanks, I'll have another look.
Melody ScottAuthor Commented:
Hi-- I took the nav code directly from the working page, index.html. It's attached. I swapped out what was on the page about.html with this fresh code, just changing the active link, the page the button goes to, and the H1 tag.

It still doesn't work: http://clinica-americas.com/about.html
index-nav.txt
F IgorDeveloperCommented:
You can use bootstrap's model to keep the header in the same place using the "navbar-brand" for page title and extra sections in navbar-header like this example (attached) see comments about.
The language link it's embedded into the header, so it's always visible. You can modify format and position  changing each section of header.
Melody ScottAuthor Commented:
Hi, sorry, I don't see anything attached?
F IgorDeveloperCommented:
Sorry i've thinking it's attached. I missed to click "Upload".
index-nav.txt
Melody ScottAuthor Commented:
Hmm. that doesn't work at all. http://clinica-americas.com/about.html
Melody ScottAuthor Commented:
Wait, I took that page down, let me try again.
Melody ScottAuthor Commented:
OK, please see here: http://clinica-americas.com/test.html

I need to have it laid out as in the other pages. This is a different layout.

I guess my question is, what is the difference between these two pages?

http://clinica-americas.com/test2.html  and index.html. The nav is identical on both, but one language button works in mobile and the other doesn't.
F IgorDeveloperCommented:
If you compare the sources, there is a custom style in index.html. There is not such code in test2.html.

This code fixes the top margin of navbar avoiding to hide your button. Apply this style in test2.html to get it working (i'm not sure if the .wrapper style is useful in test2.html).

<style>
     @media only screen and (max-width: 767px){
        #navbar-col{
            margin-top: 100px;
        }
     }
    .wrapper{background:url(../images/headerblank.jpg) left top no-repeat;}
  </style>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
Right- that style is for the animation, which only appears on index.html. Would that cause the problem with the language button?
Melody ScottAuthor Commented:
That does make the difference! Hmmm. But why? I can't have that image in there, it needs to be the flat header. I'll play around a bit. Thanks!
Melody ScottAuthor Commented:
I swapped in the flat header image into that style, and it's working perfectly. Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.