0

So I have this issue, I'm trying to get the navbar-toggle to get up into the corner but it's over lapping.

enter image description here

I also have a icon in pc view that over lapping which I really like. enter image description here

Is there a way to fix the navbar-toggle??

My code is below.

   <!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
        <img class="visible-xs img-rounded pull-right" src="smallicon2.png" alt="" > 

    <div class="container">

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-brand  page-scroll">

            <button type="button" class="navbar-toggle pull-left"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

                    <img src="icon2.png" class="img-rounded hidden-xs"  />


        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>


                 <li>
                    <a class="page-scroll" href="#">Home</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">Services</a>
                </li>
                <li>
                    <a class="page-scroll" href="#portfolio">Portfolio</a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>

                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Thanks for looking.

m4n0
  • 29,823
  • 27
  • 76
  • 89
Derek Joseph
  • 59
  • 1
  • 5

2 Answers2

1

In bootstrap CSS, Following causing the issue padding: 15px;

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

This may fix the issue padding: 0px 15px; but it will effect the logo too

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

Fiddle

Proper Fix without effecting the logo, change margin-top: 8px; to margin-top: -5px; to following CSS in bootstrap css file 

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: -5px; <<<< Here
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

Fiddle

Note: Better approach do not edit bootstrap css, make customstyle.css and add above css with !important rule in custom css.

Shehary
  • 9,926
  • 10
  • 42
  • 71
1

  1. Don't waste your time with fixing. Copy and paste the complete navbar from Bootstrap navbar. After that, delete HTML you don't need, correctly!

  2. The problem often begins if you want to have a navbar with a bigger logo. Here is a precise instruction how to create a Bootstrap navbar with a bigger logo.

Community
  • 1
  • 1