Responsive menu is not working in mobile view of the website

I have designed a responsive website,
url: http://design.jnj.net.in/aci/

1) The responsive menu is not working in the mobile view,
    Also half of the logo goes behind the banner image in the mobile view,
    the text : "Shepherding the Shepherds" is not completely visible in all pages.

2) In the desktop view: In the submenus. I have given link to specific item in the respective pages. But when we click on them, the title goes to the top of the page below the menu bar, it is hidden. I would like to have the title below and visible.
url: http://design.jnj.net.in/aci/activity.html#zonal

Kindly advice on the above issues, thanks
Ravi KumarAsked:
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.

Kyle HamiltonData ScientistCommented:
bootstrap-responsive.css, around line 857. Position static is what makes your logo go behind the image.

You can override this in your own style sheet and include it in your document after the bootstrap style sheet

@media (max-width: 979px) {
.navbar-fixed-top, .navbar-fixed-bottom {
    position: static;
}
}

Open in new window

sajayj2009Commented:
You can add following css;

@media (max-width: 979px) {
  .navbar-wrapper {
    /* overflow: hidden; */
    position: relative;
    z-index: 9999999;
  }
  .navbar-wrapper a[title='home'] img {
     width:120px;
  }
  .navbar-wrapper .name1 {
    font-size:20px;
    padding-top:12px;
  }
  #slid {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    z-index: 99;
  }
}

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
Ravi KumarAuthor Commented:
Hi sajayj2009,

Thanks for the solution, I used those lines of css, the logo and text are visible now.

But kindly provide a solution for the other two issues:

1) The responsive menu is not working in the mobile view
url: http://design.jnj.net.in/aci/

2) In the desktop view: In the submenus. I have given link to specific item in the respective pages. But when we click on them, the title goes to the top of the page below the menu bar, it is hidden. I would like to have the title below and visible.
url: http://design.jnj.net.in/aci/activity.html#zonal
sajayj2009Commented:
For 2nd.

:target {
  display: inline-block;
  padding-top: 250px;
}

Open in new window


For 1st.
Wherever resolution, menu is not working in each media query, specify css.
/* For eg: 700px screens */
@media screen and (max-width: 700px) {
#cssmenu.in > ul {
  width: 100%;
  display: block !important;
}
}

Open in new window

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
HTML

From novice to tech pro — start learning today.