How can I create a navbar-collapse that doesn't take up the whole screen?

Question

I am trying to create a collapsible navbar in Bootstrap. Right now it looks like this picture:

What I want is for the dropdown to only be of a fixed width (not take up the entire screen), to be located at the right instead of at the left, and to nicely center the text vertically inside the menu items. How can I accomplish this?

I have some additional CSS which overrides Bootstraps's defaults from boostrap.min.css. The part that has to do with the navbar is copied below:

.navbar-default {
    padding: 10px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
    font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
}

.navbar-toggle { /* the toggle is the thing seen on mobile */
    border: 0;
    margin-top: 0px;
    background-color: #{{ site.data.template.color.primary }};
}

/* Using navbar-toggle alone here isn't specific enough for reasons that are
 unclear to me, since I use only navbar-toggle above.
 https://stackoverflow.com/questions/20540563/change-icon-bar-color-in-bootstrap */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:active {
    background-color: #{{ site.data.template.color.secondary }};
}

.navbar-default .nav li a { /* the buttons in the navbar */
    height: 40px;
    line-height: 0px;
    text-transform: uppercase;
    font-family: {{ site.data.template.font.primary }};
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
}

.navbar-default .nav li a:hover {
    color: #{{ site.data.template.color.primary }};
}

.navbar-default .nav>.active>a:focus {
    background-color: #{{ site.data.template.color.primary }};
}

.navbar-default .nav>.active>a:hover {
    background-color: #{{ site.data.template.color.secondary }};
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 3px;
    background-color: #{{ site.data.template.color.primary }};
}

.navbar-default.navbar-shrink { /* This sets the background dark below the welcome */
    padding: 10px 0;
    background-color: #222;
}

.navbar-brand { /* this keeps the buttons from getting larger below the welcome */
    font-size: 1.5em;
}

@media(max-width:768px) {
    .navbar-collapse {
        width: 120px;
    }

    .navbar-collapse li a {
        background-color: #222;
    }
}

And here is the header html

<!-- Navigation -->
<nav class="navbar navbar-default navbar-default-color navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <div class="col-md-12">
                <ul class="list-inline social-buttons">
                    {% for link in site.social %}
                    <li><a href="{{ link.url }}"><i class="{{ link.icon }}"></i></a></li>
                    {% endfor %}
                </ul>
            </div>

            <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="menu">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden"><a href="#welcome"></a></li>
                <li><a class="page-scroll" href="#about">About</a></li>
                <li><a class="page-scroll" href="#projects">Projects</a></li>
                <li><a class="page-scroll" href="#writing">Writing</a></li>
                <li><a class="page-scroll" href="#contact">Contact</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

score 0 · Answer 1 · answered Jun 13 '18 at 04:23

Note: I have used inline css style tag, you should put that code in style.css file and add css media query for the proper breakpoint where hamburger icon of the navbar appears.

Also you should add bootstrap, jquery cdn etc in your question and make it ready so we can give fast answers.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Navigation -->
<div class="container">
    <nav class="navbar navbar-default navbar-default-color navbar-fixed-top">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <div class="col-md-12">
                <ul class="list-inline social-buttons">

                    <li>
                        <a href="{{ link.url }}">
                            <i class="{{ link.icon }}"></i>
                        </a>
                    </li>

                </ul>
            </div>

            <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <!-- /.navbar-collapse -->

        <!-- /.container-fluid -->
    </nav>
    <div class="collapse navbar-collapse navbar-default-color" id="menu" style="margin-top: 61px; float: right;">
        <ul class="nav navbar-nav navbar-right">
            <li class="hidden">
                <a href="#welcome"></a>
            </li>
            <li>
                <a class="page-scroll" href="#about">About</a>
            </li>
            <li>
                <a class="page-scroll" href="#projects">Projects</a>
            </li>
            <li>
                <a class="page-scroll" href="#writing">Writing</a>
            </li>
            <li>
                <a class="page-scroll" href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

Thanks for this answer. I haven't tried it yet. I'm super new to this interplay between html, css, and javascript (and jekyll's liquid engine that does some translating and piecing stuff together). I'm not sure why this should work. Can you explain? What further information do you need to make the situation clearer? I'm not using a CDN. I have bootstrap and jquery files in the repo. You probably don't want to dig, but in case you do the repo is here https://github.com/pavelkomarov/pavelkomarov.github.io/ — Pavel Komarov, Jun 13 '18 at 17:33
@pvlkmrv Why you didn't tried it yet ? You simply need to copy and paste the above code in a test html file and open it in a web browser and the above code will work only for mobile devices so use your web browser developer console for mobile view(press F12 in your browser and select mobile view). — Farhan, Jun 14 '18 at 08:11
When you will see the design in mobile view it is according to the question you want, so it was working that's why i pasted the solution, it's not good to say this will work or not without even trying the solution. Also i asked you for cdn links because here people are always in a hurry so it is good practice to make your answer ready so other people don't need to find bootstrap cdn links then jquery cdn links, add it then find out the solution, I hope you understood what i am saying :) — Farhan, Jun 14 '18 at 08:19

score 0 · Accepted Answer · answered Jun 15 '18 at 19:59

I have posted a partial answer to this question in answer to a more specific question about moving items over to the right side: Boostrap 4 Navbar Collapse Menu Right Align

Since I asked this question I updated Bootstrap. In v4 the collapsible menu for nav-navbar still looks like this. But for nav it gives me things together in a single row, so the width is somewhat more filled. I've decided this is acceptable.

To truly not take up the whole screen width, I believe one needs to use a dropdown of some kind.

How can I create a navbar-collapse that doesn't take up the whole screen?

2 Answers2