make navbar smaller on ipad

Question

I do not know how I can make my navbar smaller on Ipad. As it is now, the navbar is hanging under my logo, and they should be on a row instead. I tried to set col-sm-12 because I thought everything in the div would take 12 col, but that does not work.

My website

Does anyone have an idea how I can do that?

HTML

<!-- begin nav -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>

                            <i class="fa fa-reorder"  style="padding-left: 4px; color: red;"></i>

                    </button>
                    <!-- begin logo in navigation -->
                    <a class="navbar-brand" href="https://<?php echo $_SERVER['HTTP_HOST']?>/index.php">
                        <img src="https://<?php echo $_SERVER['HTTP_HOST']?>/images/graphic/vouzalis-webdesign.png">
                    </a>
                    <!-- end logo in navigation -->
                </div>

                <div class="navbar-collapse collapse">
                    <ul class="nav nav-pills nav-main pull-right">

                        <!-- begin navigation items -->
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']?>/index.php">Hjem</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/kompetencer.php">Kompetencer</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/portfolio.php">Portfolio</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/om-mig.php">Om Mig</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/artikler/index-artikler.php">Artikler</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/kontakt.php">Kontakt</a>
                        </li>
                        <!-- end navigation items -->
                    </ul>   
                </div>

            </div>
        </div>
    </div>
</nav>
<!-- end nav -->

CSS

@media (max-width: 767px) {

/* Navigation */
.nav-main {
    float: left!important;
}
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form {
    border: none;
}
.nav-main li:first-child {
    border-top: 1px dashed #444;
}

.navbar .dropdown-menu>li>a {
    padding: 15px 20px;
}

.nav-pills>li {
    float: none;
}
.nav-main {
    width: 100%;
}
.navbar-brand {
    padding: 0px 0px 0px 15px;
}
.fixednav .nav-main {
    background: #171717;
    margin-top: 14px;
}
.fixednav .nav-pills>li+li {
    margin-left: 0px;
}
.dropdown-menu {
    float: none;
    position: static;
}

Answer 1

You need to define your tablet breakpoint in your css.

use another media query like @media (min-width: 768px) and (max-width: 1024px) {}

define the spacing and height that you want there and it will take affect.

EDIT

I see you have a breakpoint define for min-width: 769px and max-width 991px

You can keep that breakpoint if you wish but after looking at your site the real issue is that you have your wrapping container class set to 750px and margin 0 auto to center it.

The reason your nav bar is nesting under your name element is because this container is not wide enough to display both of them inline.

You can make the container larger say 100% width and adjust your margins or make your navigation buttons smaller.

or a combination of both.