Cannot Click Home Button On Navigation Bar In Wordpress

Question

When I click a home button on navigation bar in my custom wordpress theme cannot give any response like open the home page. Please check my own theme on this link to further info. Its home button screenshot below:

Here css style for navigation bar:

 .navbar-header {
    position: relative;
}

.navbar-brand {
    float: left;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 50px;
}

I have been trying to fix it but still not luck

Answer 1

CSS

.navbar-header {
  /* your own styles */
  z-index:9999;
}

The li in .collapse .navbar-collapse lays over your navbar. You are clicking that piece in stead of your header. With z-index you bring the header back to the top.

Answer 2

The problem ist that the div "navbar-collapse" is full width and sitting on top of the button. Therefore when you're trying to click the button you actually click "navbar-collapse".

For a quick fix you could:

• give "navbar-collapse" a width and set it to "margin: 0 auto;". It will then no longer overlay your button.

or

• increase the z-index of "navbar-header" --> z-index 21 will do in your case

Answer 3

Already <div class="collapse navbar-collapse"> has z-index:20. So it overlay your main nav-bar.

Use the below css

.navbar-header {
    z-index: 21;
}

Answer 4

Change you css .. because its width is 100% and its overlapping the Home Button.. Line no 246 in style.css

.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    width: 80%;
    margin: 0px auto;}