Bootstrap 4. Why is the menu not showing on mobile?

P

persh_232018-06-02 11:20:20

User navigation

persh_23, 2018-06-02 11:20:20

Hello!
The menu opens when you click on the "burger" in the console, everything is visible, but it is not displayed on the screen. Did you screw up somewhere in the code?

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="css/main.css">
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div class="container">
        <header class="row">
            <nav class="navbar navbar-expand-lg navbar-light bg-nav">
    <a class="navbar-brand" href="#">Мой сайт</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
                            <li class="nav-item "><a class="nav-link" href="index.html"><span>Главная страница</span></a></li>
                            <li class="nav-item dropdown"><a class="nav-link dropdown-toggle"  role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  href="#"><span>Портфолио</span></a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Повышение квалификации</a>
                                <a class="dropdown-item" href="#">Заслуги</a>
                                </div>
                            </li>
                            <li class="nav-item"><a class="nav-link"  href="#"><span>О себе</span></a></li>
                            <li class="nav-item"><a class="nav-link"  href="#"><span>123</span></a></li>
                        </ul>
                    </div>
                
            </nav>
        </header>  
        
        <div class="row">
        <div class="col-md-12">
        <main>
        <div class="wrapper">
                
        </div>
        
        </main>
        </div>
        </div>
        
        <footer>
            <div class="cont-wrap clr">
                <div class="copy">
                    Copyright Сайт воспитателя © 2018
                </div>
            </div>
        </footer>  
    </div>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.slim.min.js" ></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

@font-face {
font-family: 'AgoraSansProMedium';
src: url('../fonts/AgoraSansProMedium.ttf');
}

@font-face {
font-family: 'AgoraSansProRegular';
src: url('../fonts/AgoraSansProRegular.ttf');
}

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

body {
    font-family: 'AgoraSansProRegular';
    background: #f2f2f2 url(../img/fon-site.jpg) no-repeat center 0;
    font-weight: 300;
    font-size: 16px;
    color: #555;
    
    -webkit-font-smoothing: antialiased; // сглаживание шрифтов на моб. устр.
    -webkit-overflow-scrolling: touch;
    
    margin-top: 70px;
    
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: #333;
}

p {
    line-height: 28px;
    margin-bottom: 25px;
}

a:hover {
    text-decoration: none;
    color: #16d0a4;
}

.inf-wrap .col-md-4 {
    padding-left: 0px;
}

.wrapper  {
    background-color: #fff;
    padding: 15px 15px;
}

.container .col-md-12 {
    padding: 0;
}

.navbar {
    height: 55px;
}

nav {
    padding: 0 10px 0 0;
    width: 100%;
    position: relative;
    flex: 3 1 10px;
    height: 33px;
    text-align: left;
    
}

.bg-nav {
    background-color: #323c63;
}



.navbar-brand {
    margin-right: 12rem;
}

.navbar-light .navbar-brand {
    color: #fff;
}

.navbar-light .navbar-brand:hover {
    color: #02ab84;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #02ab84;
}

.navbar-light .navbar-nav .nav-link:focus {
    color: #02ab84;
}

.navbar-light .navbar-nav .show > .nav-link {
    color: #02ab84;
}

.dropdown-menu {
    background-color: #323c63;
    top: 110%;
    border-radius: 0.15rem;
}

.dropdown-item {
    color: #fff;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #02ab84;
    text-decoration: none;
    background-color: #2E345D;
}

.btn-light {
color: #fff;
font-size: 14px;
font-style: italic;
line-height: 1.86;
border-radius: 21px;
background-color: #02ab84;
padding: 8px 40px;
margin-top: 30px;
transition: all .3s;
border-color: #02ab84;
}

.btn-light a span {
    color: #fff;
}

.btn-light:hover {
    color: #02ab84;
}

.inf-wrap {
    display: flex;
    background-color: #3e4b7d;
    color: #fff;
}

.photo {
    max-width: 27%;
    display: flex;
}

.text-block {
    display: flex;
    align-items: center;
}

.text-block h1 {
    font-size: 32px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.5;
    margin: 10px 0;
    color: #fff;
    
}

.text-block p {
    font-size: 15px;
    line-height: 1.5;
    margin: 5px 0;
    
}

.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#content {
    -webkit-box-flex: 5;
    -ms-flex: 5 1 10px;
    flex: 5 1 10px;
    background-color: #fff;
    padding: 30px 25px;
    max-width: 72%;

}



.carousel-control-next:hover, .carousel-control-prev:hover {
    background-color: #0000001a;
}

.wrapper .col-md-8 {
    margin: 0 auto;
}


footer {
    min-height: 85px;
    width: 100%;
}

footer .cont-wrap {
    padding: 15px 0;
}

.copy {
    float: left;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

P

persh_23, 2018-06-03
@persh_23

Understood. Parameter nav: height: 33px; didn't let the menu open.

A

Andrej Sharapov, 2018-06-02
@Madeas

The menu expands but your code makes the links invisible

.navbar-light .navbar-nav .nav-link {
    color: #fff;
}

https://jsfiddle.net/madeas/yxcz6qxp/4/