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!!
mel200Asked:
Who is Participating?
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

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

Thanks.
0
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mel200Author Commented:
ok, thanks, I'll have another look.
0
mel200Author 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
0
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.
0
mel200Author Commented:
Hi, sorry, I don't see anything attached?
0
F IgorDeveloperCommented:
Sorry i've thinking it's attached. I missed to click "Upload".
index-nav.txt
0
mel200Author Commented:
Hmm. that doesn't work at all. http://clinica-americas.com/about.html
0
mel200Author Commented:
Wait, I took that page down, let me try again.
0
mel200Author 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.
0
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

0

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
mel200Author Commented:
Right- that style is for the animation, which only appears on index.html. Would that cause the problem with the language button?
0
mel200Author 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!
0
mel200Author Commented:
I swapped in the flat header image into that style, and it's working perfectly. Thanks!
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.