Bootstrap navbar overlaps logo?

up vote
0
down vote

favorite

FRONT END FOR NAVBAR

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

  <div class="navbar-header">

    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>

    <a class="navbar-brand">

      <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

    </a>

  </div>

  <div class="collapse navbar-collapse" id=".navbar-collapse">

    <ul class="nav navbar-nav">

      <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

          <h4>CATEGORY<b class="caret"></b></h4>

        </a>

        <ui>...........</ui>

      </li>

      <li>

        <a href="#">

          <h4>SHIRT</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PANTS</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>SHOE</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>FASHION</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PAPER QULING</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TERRACOTA</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>MEENAKARI</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TRADITIONAL</h4>

        </a>

      </li>

      <li>

        <a></a>

      </li>

    </ul>

    </ul>

  </div>

  <br />

</nav>

When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css

@media (max-width:1502px){

  .navbar-brand {

    height: 80px; 

  }

  .navbar {

    background-color: #ccc; 

  }

  .navbar-toggle {

    margin-top: 25px; 

  }

}

IMAGE : IMAGE OF NAVBAR

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

asked Dec 28 '16 at 18:27

prashant dhuri

136

2

Can you post an image or example?
– Justin Skiles
Dec 28 '16 at 18:31

What is the problem? Alls are okay to me.
– Mr. Perfectionist
Dec 28 '16 at 18:40

Please Check the Image @JustinSkiles
– prashant dhuri
Dec 28 '16 at 18:44

Check Image i have added @BlackBird
– prashant dhuri
Dec 28 '16 at 18:45

paste.ubuntu.com/23701745 It's not creating problem to me
– Mr. Perfectionist
Dec 28 '16 at 18:53

|
show 10 more comments

up vote
0
down vote

favorite

FRONT END FOR NAVBAR

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

  <div class="navbar-header">

    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>

    <a class="navbar-brand">

      <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

    </a>

  </div>

  <div class="collapse navbar-collapse" id=".navbar-collapse">

    <ul class="nav navbar-nav">

      <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

          <h4>CATEGORY<b class="caret"></b></h4>

        </a>

        <ui>...........</ui>

      </li>

      <li>

        <a href="#">

          <h4>SHIRT</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PANTS</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>SHOE</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>FASHION</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PAPER QULING</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TERRACOTA</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>MEENAKARI</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TRADITIONAL</h4>

        </a>

      </li>

      <li>

        <a></a>

      </li>

    </ul>

    </ul>

  </div>

  <br />

</nav>

When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css

@media (max-width:1502px){

  .navbar-brand {

    height: 80px; 

  }

  .navbar {

    background-color: #ccc; 

  }

  .navbar-toggle {

    margin-top: 25px; 

  }

}

IMAGE : IMAGE OF NAVBAR

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

asked Dec 28 '16 at 18:27

prashant dhuri

136

2

Can you post an image or example?
– Justin Skiles
Dec 28 '16 at 18:31

What is the problem? Alls are okay to me.
– Mr. Perfectionist
Dec 28 '16 at 18:40

Please Check the Image @JustinSkiles
– prashant dhuri
Dec 28 '16 at 18:44

Check Image i have added @BlackBird
– prashant dhuri
Dec 28 '16 at 18:45

paste.ubuntu.com/23701745 It's not creating problem to me
– Mr. Perfectionist
Dec 28 '16 at 18:53

|
show 10 more comments

up vote
0
down vote

favorite

FRONT END FOR NAVBAR

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

  <div class="navbar-header">

    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>

    <a class="navbar-brand">

      <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

    </a>

  </div>

  <div class="collapse navbar-collapse" id=".navbar-collapse">

    <ul class="nav navbar-nav">

      <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

          <h4>CATEGORY<b class="caret"></b></h4>

        </a>

        <ui>...........</ui>

      </li>

      <li>

        <a href="#">

          <h4>SHIRT</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PANTS</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>SHOE</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>FASHION</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PAPER QULING</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TERRACOTA</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>MEENAKARI</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TRADITIONAL</h4>

        </a>

      </li>

      <li>

        <a></a>

      </li>

    </ul>

    </ul>

  </div>

  <br />

</nav>

When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css

@media (max-width:1502px){

  .navbar-brand {

    height: 80px; 

  }

  .navbar {

    background-color: #ccc; 

  }

  .navbar-toggle {

    margin-top: 25px; 

  }

}

IMAGE : IMAGE OF NAVBAR

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

asked Dec 28 '16 at 18:27

prashant dhuri

136

FRONT END FOR NAVBAR

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

  <div class="navbar-header">

    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>

    <a class="navbar-brand">

      <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

    </a>

  </div>

  <div class="collapse navbar-collapse" id=".navbar-collapse">

    <ul class="nav navbar-nav">

      <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

          <h4>CATEGORY<b class="caret"></b></h4>

        </a>

        <ui>...........</ui>

      </li>

      <li>

        <a href="#">

          <h4>SHIRT</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PANTS</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>SHOE</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>FASHION</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>PAPER QULING</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TERRACOTA</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>MEENAKARI</h4>

        </a>

      </li>

      <li>

        <a href="#">

          <h4>TRADITIONAL</h4>

        </a>

      </li>

      <li>

        <a></a>

      </li>

    </ul>

    </ul>

  </div>

  <br />

</nav>

When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css

@media (max-width:1502px){

  .navbar-brand {

    height: 80px; 

  }

  .navbar {

    background-color: #ccc; 

  }

  .navbar-toggle {

    margin-top: 25px; 

  }

}

IMAGE : IMAGE OF NAVBAR

css asp.net twitter-bootstrap navbar

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

asked Dec 28 '16 at 18:27

prashant dhuri

136

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

asked Dec 28 '16 at 18:27

prashant dhuri

136

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

edited Dec 28 '16 at 21:46

vanburen

16.7k41829

asked Dec 28 '16 at 18:27

prashant dhuri

136

asked Dec 28 '16 at 18:27

prashant dhuri

136

asked Dec 28 '16 at 18:27

prashant dhuri

136

2

Can you post an image or example?
– Justin Skiles
Dec 28 '16 at 18:31

What is the problem? Alls are okay to me.
– Mr. Perfectionist
Dec 28 '16 at 18:40

Please Check the Image @JustinSkiles
– prashant dhuri
Dec 28 '16 at 18:44

Check Image i have added @BlackBird
– prashant dhuri
Dec 28 '16 at 18:45

paste.ubuntu.com/23701745 It's not creating problem to me
– Mr. Perfectionist
Dec 28 '16 at 18:53

|
show 10 more comments

2

Can you post an image or example?
– Justin Skiles
Dec 28 '16 at 18:31

What is the problem? Alls are okay to me.
– Mr. Perfectionist
Dec 28 '16 at 18:40

Please Check the Image @JustinSkiles
– prashant dhuri
Dec 28 '16 at 18:44

Check Image i have added @BlackBird
– prashant dhuri
Dec 28 '16 at 18:45

paste.ubuntu.com/23701745 It's not creating problem to me
– Mr. Perfectionist
Dec 28 '16 at 18:53

Can you post an image or example?
– Justin Skiles
Dec 28 '16 at 18:31

What is the problem? Alls are okay to me.
– Mr. Perfectionist
Dec 28 '16 at 18:40

Please Check the Image @JustinSkiles
– prashant dhuri
Dec 28 '16 at 18:44

Check Image i have added @BlackBird
– prashant dhuri
Dec 28 '16 at 18:45

paste.ubuntu.com/23701745 It's not creating problem to me
– Mr. Perfectionist
Dec 28 '16 at 18:53

|
show 10 more comments

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.

You can change the breakpoint that the navbar collapses, additionally you can change the display property of the links so they wrap. This will leave them exposed longer but you'll still need to collapse the nav earlier then normal.

Example I:

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1505px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1504px) and (min-width: 768px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 1504px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Example II: Wrapped Links

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1500px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-tall .navbar-nav {

    display: table;

    float: none;

  }

  .navbar.navbar-tall .navbar-nav > li {

    display: table-cell;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 999px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

add a comment |

up vote
0
down vote

Maybe this is what you are looking for:

.navbar-brand {

    padding: 0px !important;

}



    .navbar-brand > img {

        height: 100%;

        width: auto;

    }



@media (min-width:768px) {

    .navbar-brand {

        padding: 15px 0px 0px 0px !important;

    }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">

                    <!--start - only for test pupose-->

                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">

                    <!--start - only for test pupose-->

                    <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

                </a>

            </div>

            <div class="navbar-collapse collapse" id=".navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                            <h4>CATEGORY<b class="caret"></b></h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHIRT</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PANTS</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHOE</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>FASHION</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PAPER QULING</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TERRACOTA</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>MEENAKARI</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TRADITIONAL</h4>

                        </a>

                    </li>

                    <li><a></a></li>

                </ul>

            </div>

        </div>

    </nav>

edited Dec 28 '16 at 20:08

answered Dec 28 '16 at 19:43

Cecilia

31117

it almost worked but but logo gets to small i want it big
– prashant dhuri
Dec 28 '16 at 19:48

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41367708%2fbootstrap-navbar-overlaps-logo%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.

Example I:

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1505px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1504px) and (min-width: 768px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 1504px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Example II: Wrapped Links

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1500px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-tall .navbar-nav {

    display: table;

    float: none;

  }

  .navbar.navbar-tall .navbar-nav > li {

    display: table-cell;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 999px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

add a comment |

up vote
0
down vote

accepted

Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.

Example I:

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1505px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1504px) and (min-width: 768px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 1504px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Example II: Wrapped Links

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1500px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-tall .navbar-nav {

    display: table;

    float: none;

  }

  .navbar.navbar-tall .navbar-nav > li {

    display: table-cell;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 999px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

add a comment |

up vote
0
down vote

accepted

Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.

Example I:

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1505px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1504px) and (min-width: 768px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 1504px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Example II: Wrapped Links

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1500px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-tall .navbar-nav {

    display: table;

    float: none;

  }

  .navbar.navbar-tall .navbar-nav > li {

    display: table-cell;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 999px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.

Example I:

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1505px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1504px) and (min-width: 768px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 1504px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Example II: Wrapped Links

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1500px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-tall .navbar-nav {

    display: table;

    float: none;

  }

  .navbar.navbar-tall .navbar-nav > li {

    display: table-cell;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 999px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1505px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1504px) and (min-width: 768px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 1504px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1505px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1504px) and (min-width: 768px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 1504px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1500px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-tall .navbar-nav {

    display: table;

    float: none;

  }

  .navbar.navbar-tall .navbar-nav > li {

    display: table-cell;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 999px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

.navbar.navbar-tall {

  background-color: white;

}

.navbar.navbar-tall .navbar-nav > li > a {

  text-transform: uppercase;

  font-size: 20px;

  font-weight: bold;

}

.navbar.navbar-tall .navbar-brand {

  padding-top: 5px;

}

.navbar.navbar-tall .navbar-brand img {

  height: 90px;

}

@media (min-width: 1500px) {

  .navbar.navbar-tall .navbar-nav > li > a {

    line-height: 70px;

  }

}

@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-tall .navbar-nav {

    display: table;

    float: none;

  }

  .navbar.navbar-tall .navbar-nav > li {

    display: table-cell;

  }

}

/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/



@media (max-width: 1499px) and (min-width: 1000px) {

  .navbar.navbar-fixed-bottom .navbar-collapse,

  .navbar.navbar-fixed-top .navbar-collapse {

    max-height: auto;

    overflow-x: visible;

  }

}

@media (max-width: 999px) {

  .navbar .navbar-header {

    float: none;

    min-height: 100px;

  }

  .navbar .navbar-left,

  .navbar .navbar-right {

    float: none !important;

  }

  .navbar .navbar-right {

    margin-right: 0px;

  }

  .navbar .navbar-right~.navbar-right {

    margin-right: 0;

  }

  .navbar .navbar-toggle {

    display: block;

    margin-top: 32.5px;

  }

  .navbar .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navbar.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navbar .navbar-collapse.collapse {

    display: none!important;

    overflow: visible!important;

  }

  .navbar .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navbar .navbar-nav>li {

    float: none;

  }

  .navbar .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navbar .collapse.in {

    display: block !important;

    overflow-y: auto;

  }

  .navbar .navbar-nav .dropdown-menu > li > a,

  .navbar .navbar-nav .dropdown-menu > li > a:hover,

  .navbar .navbar-nav .dropdown-menu > li > a:focus {

    color: #777;

  }

  .navbar .navbar-nav .open .dropdown-menu {

    position: static;

    float: none;

    width: auto;

    margin-top: 0;

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

  }

}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<nav class="navbar navbar-default navbar-tall" role="navigation">

  <div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand">

        <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">

      </a>

    </div>



    <div class="collapse navbar-collapse" id=".navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">LINK</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#">SHIRT</a>

        </li>

        <li>

          <a href="#">PANTS</a>

        </li>

        <li>

          <a href="#">SHOE</a>

        </li>

        <li>

          <a href="#">FASHION</a>

        </li>

        <li>

          <a href="#">PAPER QULING</a>

        </li>

        <li>

          <a href="#">TERRACOTA</a>

        </li>

        <li>

          <a href="#">MEENAKARI</a>

        </li>

        <li>

          <a href="#">TRADITIONAL</a>

        </li>

      </ul>

    </div>



  </div>

</nav>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

answered Dec 28 '16 at 21:45

vanburen

16.7k41829

add a comment |

up vote
0
down vote

Maybe this is what you are looking for:

.navbar-brand {

    padding: 0px !important;

}



    .navbar-brand > img {

        height: 100%;

        width: auto;

    }



@media (min-width:768px) {

    .navbar-brand {

        padding: 15px 0px 0px 0px !important;

    }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">

                    <!--start - only for test pupose-->

                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">

                    <!--start - only for test pupose-->

                    <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

                </a>

            </div>

            <div class="navbar-collapse collapse" id=".navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                            <h4>CATEGORY<b class="caret"></b></h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHIRT</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PANTS</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHOE</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>FASHION</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PAPER QULING</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TERRACOTA</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>MEENAKARI</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TRADITIONAL</h4>

                        </a>

                    </li>

                    <li><a></a></li>

                </ul>

            </div>

        </div>

    </nav>

edited Dec 28 '16 at 20:08

answered Dec 28 '16 at 19:43

Cecilia

31117

it almost worked but but logo gets to small i want it big
– prashant dhuri
Dec 28 '16 at 19:48

add a comment |

up vote
0
down vote

Maybe this is what you are looking for:

.navbar-brand {

    padding: 0px !important;

}



    .navbar-brand > img {

        height: 100%;

        width: auto;

    }



@media (min-width:768px) {

    .navbar-brand {

        padding: 15px 0px 0px 0px !important;

    }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">

                    <!--start - only for test pupose-->

                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">

                    <!--start - only for test pupose-->

                    <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

                </a>

            </div>

            <div class="navbar-collapse collapse" id=".navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                            <h4>CATEGORY<b class="caret"></b></h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHIRT</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PANTS</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHOE</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>FASHION</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PAPER QULING</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TERRACOTA</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>MEENAKARI</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TRADITIONAL</h4>

                        </a>

                    </li>

                    <li><a></a></li>

                </ul>

            </div>

        </div>

    </nav>

edited Dec 28 '16 at 20:08

answered Dec 28 '16 at 19:43

Cecilia

31117

it almost worked but but logo gets to small i want it big
– prashant dhuri
Dec 28 '16 at 19:48

add a comment |

up vote
0
down vote

Maybe this is what you are looking for:

.navbar-brand {

    padding: 0px !important;

}



    .navbar-brand > img {

        height: 100%;

        width: auto;

    }



@media (min-width:768px) {

    .navbar-brand {

        padding: 15px 0px 0px 0px !important;

    }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">

                    <!--start - only for test pupose-->

                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">

                    <!--start - only for test pupose-->

                    <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

                </a>

            </div>

            <div class="navbar-collapse collapse" id=".navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                            <h4>CATEGORY<b class="caret"></b></h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHIRT</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PANTS</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHOE</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>FASHION</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PAPER QULING</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TERRACOTA</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>MEENAKARI</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TRADITIONAL</h4>

                        </a>

                    </li>

                    <li><a></a></li>

                </ul>

            </div>

        </div>

    </nav>

edited Dec 28 '16 at 20:08

answered Dec 28 '16 at 19:43

Cecilia

31117

Maybe this is what you are looking for:

.navbar-brand {

    padding: 0px !important;

}



    .navbar-brand > img {

        height: 100%;

        width: auto;

    }



@media (min-width:768px) {

    .navbar-brand {

        padding: 15px 0px 0px 0px !important;

    }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">

                    <!--start - only for test pupose-->

                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">

                    <!--start - only for test pupose-->

                    <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

                </a>

            </div>

            <div class="navbar-collapse collapse" id=".navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                            <h4>CATEGORY<b class="caret"></b></h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHIRT</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PANTS</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHOE</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>FASHION</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PAPER QULING</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TERRACOTA</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>MEENAKARI</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TRADITIONAL</h4>

                        </a>

                    </li>

                    <li><a></a></li>

                </ul>

            </div>

        </div>

    </nav>

.navbar-brand {

    padding: 0px !important;

}



    .navbar-brand > img {

        height: 100%;

        width: auto;

    }



@media (min-width:768px) {

    .navbar-brand {

        padding: 15px 0px 0px 0px !important;

    }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">

                    <!--start - only for test pupose-->

                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">

                    <!--start - only for test pupose-->

                    <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

                </a>

            </div>

            <div class="navbar-collapse collapse" id=".navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                            <h4>CATEGORY<b class="caret"></b></h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHIRT</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PANTS</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHOE</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>FASHION</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PAPER QULING</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TERRACOTA</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>MEENAKARI</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TRADITIONAL</h4>

                        </a>

                    </li>

                    <li><a></a></li>

                </ul>

            </div>

        </div>

    </nav>

.navbar-brand {

    padding: 0px !important;

}



    .navbar-brand > img {

        height: 100%;

        width: auto;

    }



@media (min-width:768px) {

    .navbar-brand {

        padding: 15px 0px 0px 0px !important;

    }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand">

                    <!--start - only for test pupose-->

                    <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">

                    <!--start - only for test pupose-->

                    <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />

                </a>

            </div>

            <div class="navbar-collapse collapse" id=".navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="dropdown">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                            <h4>CATEGORY<b class="caret"></b></h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHIRT</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PANTS</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>SHOE</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>FASHION</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>PAPER QULING</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TERRACOTA</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>MEENAKARI</h4>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <h4>TRADITIONAL</h4>

                        </a>

                    </li>

                    <li><a></a></li>

                </ul>

            </div>

        </div>

    </nav>

edited Dec 28 '16 at 20:08

answered Dec 28 '16 at 19:43

Cecilia

31117

edited Dec 28 '16 at 20:08

answered Dec 28 '16 at 19:43

Cecilia

31117

answered Dec 28 '16 at 19:43

Cecilia

31117

answered Dec 28 '16 at 19:43

Cecilia

31117

it almost worked but but logo gets to small i want it big
– prashant dhuri
Dec 28 '16 at 19:48

add a comment |

it almost worked but but logo gets to small i want it big
– prashant dhuri
Dec 28 '16 at 19:48

it almost worked but but logo gets to small i want it big
– prashant dhuri
Dec 28 '16 at 19:48

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk