DEVHIDE
Login Or Sign up

Bootstrap 4 navbar overlapping on mobile

1.8k Views Asked by At

I am making a project at school and I am using Bootstrap 4 and I am pretty new to it.

I have my navbar brand as an image centered in the middle of the navbar. But when I switch over to a smaller screen some of the navbar items get moved down under the navbar. And that also creates a space between the carousel and the navbar.

I suspect that it is because of the "absolute" position of the navbar brand image.

Here is a Jsfiddle: jsfiddle(dot)net/zdu9jv99/3/ I don't know why it isn't fully working..... (I can't post more than two links, that's why I have to do the (dot).)

This is what it looks like on smaller displays. Image that shows the overlapping This is how it is supposed to look like. This is how it looks on bigger screens Here is my html and css:

    <!DOCTYPE html>
<html lang="sv">

<head>
    <title>Barber Shop</title>
    <meta charset="utf-8">
    <!-- Icon -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Font-Awesome Core CSS -->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <header>
        <!-- Navigation -->
        <nav class="navbar navbar-dark bg-inverse navbar-static-top navbar-full" style="background-color: #d8c387 !important;">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <ul class="nav navbar-nav">
                            <li class="nav-item"><a class="nav-link" href="index.html"><i class="fa fa-home icon-padding" aria-hidden="true"></i>Hem</a></li>
                            <li class="nav-item"><a class="nav-link" href="hittafrisor.html"><i class="fa fa-map-marker icon-padding" aria-hidden="true"></i>Hitta frisör</a></li>
                            <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-picture-o icon-padding" aria-hidden="true"></i>Galleri</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2">
                        <div class="navbar-brand">
                            <a class="white-circle" href="index.html">
                                <img class="img-fluid" src="assets/images/barber-logo.png" alt="Logo">
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">

                        <ul class="nav navbar-nav float-md-right">
                            <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-info icon-padding" aria-hidden="true"></i>Om oss</a></li>
                            <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-phone icon-padding" aria-hidden="true"></i>Kontakt</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <main>

css:

    /* NAVBAR */
.navbar {
    height: 58px;
    z-index: 2 !important;
}

.navbar-brand {
  display: inline-block;
  float: none;
  padding: 0;
  margin: 0 !important;
  overflow: visible;
}

.navbar-brand img {
    z-index: 3 !important;
}

.navbar-brand .white-circle {
  display: block;
  width: 161px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
}

.navbar {
  text-align: center;
}

.nav-link {
  color: #741833 !important;
}

/* NAVBAR FONT SIZE */
.nav a{
  font-size: 17px;
}

I have also uploaded the project to as site, if you want to look at the whole thing. If you have any other opinions or anything else feel free the critique me, I am sure that I have made some more mistakes. The site is cpt-keyhole.se (yes I know a strange name)

It probably just is an easy thing that i have missed or misunderstood, so I would appreciate some your help. Thanks for your time!

html css twitter-bootstrap navbar overlap
Original Q&A
2

There are 2 best solutions below

0
On BEST ANSWER

One of the link from left menus is dropping down because of limited space in its parent div.

You need to increase width of left navigation links on mobile devices like:

@media screen and (max-width: 480px) {
 .leftMenus
  {
    width:300px;
  }
}
1
On

Here is the code which works with current monitor size, max-width:768px for iPad and max-width:414px for iPhone 6 Plus:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navbar Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://use.fontawesome.com/97755550d3.js"></script>
    <style>
        img.logo-img{
            width:150px;
            height:150px;
            border-radius:50%;
            position:absolute;
            left:50%;
            /* bring your own prefixes */
            transform: translate(-50%, -10%);
        }


        .navbar-default .navbar-nav > li > a {
          color:#741833;
          font-size:20px;
        }

        .navbar-default .navbar-nav > li > a >i{
          margin-right:10px;
        }

        li.left-menu{
            position:absolute;
            right:5%;
        }
        li.left-menu1{
            position:absolute;
            right:13%;
        }

        @media only screen and (max-device-width: 768px) and (orientation:portrait){
            img.logo-img{
                width:100px;
                height:100px;
                border-radius:50%;
                position:absolute;
                top:10px;
                left:50%;
                /* bring your own prefixes */
                transform: translate(-50%, -10%);
            }

            .navbar-default .navbar-nav > li > a {
              color:#741833;
              font-size:16px;
            }

            .navbar-default .navbar-nav > li > a >i{
              margin-right:5px;
            }

            .spl-container{
                padding:0;
            }

            .navbar-brand{
                padding:0;
            }

            li.left-menu{
                position:absolute;
                right:5%;
            }
            li.left-menu1{
                position:absolute;
                right:17%;
            }
        }

        @media only screen and (max-device-width: 414px) and (orientation:portrait){
            img.logo-img{
                width:80px;
                height:80px;
                border-radius:50%;
                position:absolute;
                top:10px;
                left:50%;
                /* bring your own prefixes */
                transform: translate(-50%, -10%);
            }

            .navbar-default .navbar-nav > li > a {
              color:#741833;
              font-size:16px;
              margin-left:10px;
            }

            li.left-menu{
                position:relative;
                left:5px;
            }
            li.left-menu1{
                position:relative;
                left:5px;
            }

            li.first-menu{
                margin-top:60px;
            }

            .navbar-toggle{
                position:absolute;
                right:0;
            }
        }

    </style>
</head>
<body>
    <nav class="navbar navbar-default" style="background-color:#d8c387;">
        <div class="container-fluid spl-container">
            <div class="navbar-brand">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#">
                    <img src="download.png" alt="logo" class="logo-img" />
                </a>
            </div>

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="first-menu"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Hem</a></li>
                    <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>Hitta Frisor</a></li>
                    <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>Galleri</a></li>
                    <li class="left-menu"><a href="#"><i class="fa fa-info" aria-hidden="true"></i>Om oss</a></li>
                    <li class="left-menu1"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>Kontakt</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in NAVBAR

Related Questions in OVERLAP

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.