Я новичок в css и bootstrap и не могу понять, как это решить. Любая помощь приветствуется.
У меня две проблемы с моим кодом.
1) Когда я нажимаю на меню «Добро пожаловать, пользователь» на маленьких экранах (мобильных), внутри навигационной панели открывается раскрывающееся меню, искажающее панель и изменяющее ее высоту. Я хочу, чтобы он вел себя так же, как на больших экранах (например, на компьютерах). Когда я нажимаю, я хочу, чтобы он открывал пункты меню без изменения панели навигации, перед панелью навигации, но не внутри.
2) Еще одна проблема: даже на больших экранах я не вижу пункты меню полностью. Часть текста предметов спрятана по краю экрана. Мне бы хотелось, чтобы меню полностью отображалось на экране, независимо от того, настольное оно или мобильное.
Чтобы было понятно, я записываю очень маленькое видео, демонстрирующее проблему:
https://puu.sh/Bq34w/ac56908be0.mp4
Полный код:
https://jsfiddle.net/fredslz/0v7qwjdm/12/
<!doctype html>
<html lang="en">
<body class="text-center">
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #FFFFFF;">
<button class="navbar-toggler navbar-nav mr-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav ml-md--auto">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
</body>
</html>
И CSS:
.navbar {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}