Responsive Navbar Items

Question

I am using Bootstrap 3 to create a Navbar. My Navbar has a certain amount of spacing between the items and the logo in the middle. Every time I zoom in, the spacing decreases between the items and the logo. How can I make the spacing static when zooming in/out?

100% : 175% :

If needed, here is my CSS + HTML,

.navbar-default {
    height: 125px;
    background-color: transparent;
    border-color: transparent;
}

.navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
}

.navbar-brand img {
    height: 95px;
}

.navbar-nav li a {
    line-height: 125px;
    height: 125px;
    padding-top: 0;
    font-weight: 300;
    text-transform: uppercase;
}

.navbar-default .navbar-nav>li>a {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a {
    background-color: transparent !IMPORTANT;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #1AC1AD !IMPORTANT;
}

  <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
                <a class="navbar-brand" href="#"><img src="assets/img/logo-plain.png"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

@Rohit http://hastebin.com/yijunewino.js – L. Wu Nov 30 '16 at 00:26 — L. Wu, Nov 30 '16 at 00:26
Please add this HTML in your question. – Rohit Nov 30 '16 at 00:27 — Rohit, Nov 30 '16 at 00:27

score 0 · Answer 1 · edited Nov 30 '16 at 07:43

0

@media (min-width: 768px) {
    .container {
        width: 100%;
    }
}

edited Nov 30 '16 at 07:43

Luka Kerr

4,161
7
39
50

answered Nov 30 '16 at 00:19

Naob

29
3

1

try .navbar-nav > li { float: left; margin-left: 15px; } – Naob Nov 30 '16 at 00:32
As I zoom in, it still moves closer and closer to the brand image – L. Wu Nov 30 '16 at 00:35
add html of navbar in your question – Naob Nov 30 '16 at 00:45
http://stackoverflow.com/questions/20024463/bootstrap-3-how-do-i-place-the-brand-in-the-center-of-the-navbar – Naob Nov 30 '16 at 00:50
The HTML is below the CSS – L. Wu Nov 30 '16 at 01:01
I already have my navbar centered, but the items are moving closer to the brand image as I zoom in – L. Wu Nov 30 '16 at 01:05
.container { width: 750px; } – Naob Nov 30 '16 at 01:15
that is by default in bootsrap ... when media changes container width changes – Naob Nov 30 '16 at 01:28
Hmm, it seems that when I zoom it, the width of the screen also increases a lot. I would have to scroll all the way to the right to click the hamburger icon – L. Wu Nov 30 '16 at 01:57
you can set .container width for large devices. Bootsrap is perfect script that covers lot of things about structure – Naob Nov 30 '16 at 16:27

Responsive Navbar Items

1 Answers1