Вертикальная панель навигации Bootstrap 5 слева не позволяет использовать элементы управления справа от нее

Вертикальная панель навигации Bootstrap 5 слева не позволяет использовать элементы управления справа от нее ⇐ CSS

1 сообщение • Страница 1 из 1

Anonymous

Вертикальная панель навигации Bootstrap 5 слева не позволяет использовать элементы управления справа от нее

Цитата

Сообщение Anonymous » 29 окт 2024, 09:07

Эта панель навигации расположена вертикально в левой части страницы. Если я оставлю фиксированный верх, содержимое справа окажется под контролем.
Если будет добавлен фиксированный верх, содержимое будет идеально выравниваться по правому краю, но я не смогу получить доступ к таким элементам, как ссылки и панель поиска, которые находятся непосредственно справа от панели навигации — содержимое ниже высоты панели навигации работает как положено. Как будто элементы управления отключены.
Есть идеи?
Вот как это выглядит (нажмите, чтобы увеличить)

ОБНОВЛЕНИЕ. Вот код панели навигации. Полная панель навигации имеет длину около 500 строк, поэтому просто добавила первые несколько строк.

Код: Выделить всё

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

.container-menu {
position: relative;
margin: 0px auto;
padding: 50px 0;
clear: both;
}

.mcd-menu {
list-style: none;
padding: 0;
margin: 0;
background: #FFF;
/*height: 100px;*/
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
/* == */
width: 250px;
/* == */
}

.mcd-menu li {
position: relative;
margin-bottom: 10px;
margin-top: 10px;
/*float: left;*/
/*float:left;*/
}

.mcd-menu li a {
display: block;
text-decoration: none;
padding: 12px 20px;
color: #777;
/*text-align: center;
border-right: 1px solid #E7E7E7;*/
/* == */
text-align: left;
height: 36px;
position: relative;
border-bottom: 1px solid #EEE;
/* == */
}

.mcd-menu li a i {
/* margin-bottom: 25px;*/
/*display: block;
font-size: 30px;
margin-bottom: 10px;*/
/* == */
float: left;
font-size: 20px;
margin: 0 10px 0 0;
/* == */
}

/* == */

.mcd-menu li a p {
float: left;
margin: 0;
}

/* == */

.mcd-menu li a strong {
display: block;
text-transform: uppercase;
}

.mcd-menu li a small {
display: block;
font-size: 10px;
}

.mcd-menu li a i,
.mcd-menu li a strong,
.mcd-menu li a small {
position: relative;
transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-webkit-transition: all 300ms linear;
}

.mcd-menu li:hover>a i {
opacity: 1;
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
-o-animation: moveFromTop 300ms ease-in-out;
animation: moveFromTop 300ms ease-in-out;
}

.mcd-menu li:hover a strong {
opacity: 1;
-webkit-animation: moveFromLeft 300ms ease-in-out;
-moz-animation: moveFromLeft 300ms ease-in-out;
-ms-animation: moveFromLeft 300ms ease-in-out;
-o-animation: moveFromLeft 300ms ease-in-out;
animation: moveFromLeft 300ms ease-in-out;
}

.mcd-menu li:hover a small {
opacity: 1;
-webkit-animation: moveFromRight 300ms ease-in-out;
-moz-animation: moveFromRight 300ms ease-in-out;
-ms-animation: moveFromRight 300ms ease-in-out;
-o-animation: moveFromRight 300ms ease-in-out;
animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover>a {
color: #e67e22;
}

.mcd-menu li a.active {
position: relative;
color: #e67e22;
border: 0;
/*border-top: 4px solid #e67e22;
border-bottom: 4px solid #e67e22;
margin-top: -4px;*/
box-shadow: 0 0 5px #DDD;
-moz-box-shadow: 0 0 5px #DDD;
-webkit-box-shadow: 0 0 5px #DDD;
/* == */
border-left: 4px solid #e67e22;
border-right: 4px solid #e67e22;
margin: 0 -4px;
/* == */
}

.mcd-menu li a.active:before {
content: "";
position: absolute;
/*top: 0;
left: 45%;
border-top: 5px solid #e67e22;
border-left: 5px solid transparent;
border-right: 5px solid transparent;*/
/* == */
top: 42%;
left: 0;
border-left: 5px solid #e67e22;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
/* == */
}

/* == */

.mcd-menu li a.active:after {
content: "";
position: absolute;
top: 42%;
right: 0;
border-right: 5px solid #e67e22;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}

/* == */

@-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
-moz-transform:  translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
}

@-webkit-keyframes moveFromLeft {
from {
opacity: 0;
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
to {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}

@-webkit-keyframes moveFromRight {
from {
opacity: 0;
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
to {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}

.mcd-menu li ul,
.mcd-menu li ul li ul {
position: absolute;
height: auto;
min-width: 200px;
padding: 0;
margin: 0;
background: #FFF;
/*border-top: 4px solid #e67e22;*/
opacity: 0;
visibility: hidden;
transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-webkit-transition: all 300ms linear;
/*top: 130px;*/
z-index: 1000;
/* == */
left: 280px;
top: 0px;
/*ul {
display: block;
opacity: 1;
visibility: visible;
/*top: 100px;*/
/* == */
left: 250px;
/* == */
}

/*.mcd-menu li ul li {
float: none;
}*/

.mcd-menu li ul li a {
padding: 10px;
text-align: left;
border: 0;
border-bottom: 1px solid #EEE;
/* == */
height: auto;
/* == */
}

.mcd-menu li ul li a i {
font-size: 16px;
display: inline-block;
margin: 0 10px 0 0;
}

.mcd-menu li ul li ul {
left: 230px;
top: 0;
border: 0;
border-left: 4px solid #e67e22;
}

.mcd-menu li ul li ul:before {
content: "";
position: absolute;
top: 15px;
/*left: -14px;*/
/* == */
left: -9px;
/* == */
border-right: 5px solid #e67e22;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}

.mcd-menu li ul li:hover>ul {
top: 0px;
left: 200px;
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.mcd-menu {
margin-left: 10px;
}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.mcd-menu {
width: 200px;
}
.mcd-menu li a {
height: 30px;
}
.mcd-menu li a i {
font-size: 22px;
}
.mcd-menu li a strong {
font-size: 12px;
}
.mcd-menu li a small {
font-size: 10px;
}
.mcd-menu li a.search input {
width: 120px;
font-size: 12px;
}
.mcd-menu li a.search buton {
padding: 8px 10px 9px 10px;
}
.mcd-menu li>ul {
min-width: 180px;
}
.mcd-menu li:hover>ul {
min-width: 180px;
left: 200px;
}
.mcd-menu li ul li>ul,
.mcd-menu li ul li ul li>ul {
min-width: 150px;
}
.mcd-menu li ul li:hover>ul {
left: 180px;
min-width: 150px;
}
.mcd-menu li ul li ul li:hover>ul {
left: 150px;
min-width: 150px;
}
.mcd-menu li ul a {
font-size: 12px;
}
.mcd-menu li ul a i {
font-size:  14px;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.mcd-menu {
width: 50px;
}
.mcd-menu li a {
position: relative;
padding: 12px 16px;
height: 20px;
}
.mcd-menu li a small {
display: none;
}
.mcd-menu li a strong {
display: none;
}
.mcd-menu li a:hover strong,
.mcd-menu li a.active strong {
display: block;
font-size: 10px;
padding: 3px 0;
position: absolute;
bottom: 0px;
left: 0;
background: #e67e22;
color: #FFF;
min-width: 100%;
text-transform: lowercase;
font-weight: normal;
text-align: center;
}
.mcd-menu li .search {
display: none;
}
.mcd-menu li>ul {
min-width: 180px;
left: 70px;
}
.mcd-menu li:hover>ul {
min-width: 180px;
left: 50px;
}
.mcd-menu li ul li>ul,
.mcd-menu li ul li ul li>ul {
min-width: 150px;
}
.mcd-menu li ul li:hover>ul {
left: 180px;
min-width: 150px;
}
.mcd-menu li ul li ul li>ul {
left: 35px;
top: 45px;
border: 0;
border-top: 4px solid #e67e22;
}
.mcd-menu li ul li ul li>ul:before {
left: 30px;
top: -9px;
border: 0;
border-bottom: 5px solid #e67e22;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.mcd-menu li ul li ul li:hover>ul {
left: 30px;
min-width: 150px;
top: 35px;
}
.mcd-menu li ul a {
font-size: 12px;
}
.mcd-menu li ul a i {
font-size: 14px;
}
}

@media only screen and (max-width: 479px) {
.mcd-menu {
width: 50px;
}
.mcd-menu li a {
position: relative;
padding: 12px 16px;
height: 20px;
}
.mcd-menu li a small {
display: none;
}
.mcd-menu li a strong {
display: none;
}
.mcd-menu li a:hover strong,
.mcd-menu li a.active strong {
display: block;
font-size: 10px;
padding: 3px 0;
position: absolute;
bottom: 0px;
left: 0;
background: #e67e22;
color: #FFF;
min-width: 100%;
text-transform: lowercase;
font-weight: normal;
text-align:  center;
}
.mcd-menu li .search {
/* placeholder */
}
}

Код: Выделить всё

[*]





[list]

[url=#Menu_1]
[/i][b]Overview[/b]
[/url]

[*]
[url=#Menu_2]
[i][/i][b]Terms[/b]
[/url]

[*]
[url=#Menu_3]
[i][/i][b]System[/b]
[/url]



Подробнее здесь: [url]https://stackoverflow.com/questions/79132852/bootstrap-5-vertical-navbar-on-left-unable-to-use-controls-to-the-right-of-it[/url]

1730182032

Anonymous

Эта панель навигации расположена вертикально в левой части страницы. Если я оставлю фиксированный верх, содержимое справа окажется под контролем.
Если будет добавлен фиксированный верх, содержимое будет идеально выравниваться по правому краю, но я не смогу получить доступ к таким элементам, как ссылки и панель поиска, которые находятся непосредственно справа от панели навигации — содержимое ниже высоты панели навигации работает как положено. Как будто элементы управления отключены.
Есть идеи?
Вот как это выглядит (нажмите, чтобы увеличить)
[i]
[b]ОБНОВЛЕНИЕ[/b]. Вот код панели навигации.  Полная панель навигации имеет длину около 500 строк, поэтому просто добавила первые несколько строк.


[code].clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

.container-menu {
position: relative;
margin: 0px auto;
padding: 50px 0;
clear: both;
}

.mcd-menu {
list-style: none;
padding: 0;
margin: 0;
background: #FFF;
/*height: 100px;*/
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
/* == */
width: 250px;
/* == */
}

.mcd-menu li {
position: relative;
margin-bottom: 10px;
margin-top: 10px;
/*float: left;*/
/*float:left;*/
}

.mcd-menu li a {
display: block;
text-decoration: none;
padding: 12px 20px;
color: #777;
/*text-align: center;
border-right: 1px solid #E7E7E7;*/
/* == */
text-align: left;
height: 36px;
position: relative;
border-bottom: 1px solid #EEE;
/* == */
}

.mcd-menu li a i {
/* margin-bottom: 25px;*/
/*display: block;
font-size: 30px;
margin-bottom: 10px;*/
/* == */
float: left;
font-size: 20px;
margin: 0 10px 0 0;
/* == */
}

/* == */

.mcd-menu li a p {
float: left;
margin: 0;
}

/* == */

.mcd-menu li a strong {
display: block;
text-transform: uppercase;
}

.mcd-menu li a small {
display: block;
font-size: 10px;
}

.mcd-menu li a i,
.mcd-menu li a strong,
.mcd-menu li a small {
position: relative;
transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-webkit-transition: all 300ms linear;
}

.mcd-menu li:hover>a i {
opacity: 1;
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
-o-animation: moveFromTop 300ms ease-in-out;
animation: moveFromTop 300ms ease-in-out;
}

.mcd-menu li:hover a strong {
opacity: 1;
-webkit-animation: moveFromLeft 300ms ease-in-out;
-moz-animation: moveFromLeft 300ms ease-in-out;
-ms-animation: moveFromLeft 300ms ease-in-out;
-o-animation: moveFromLeft 300ms ease-in-out;
animation: moveFromLeft 300ms ease-in-out;
}

.mcd-menu li:hover a small {
opacity: 1;
-webkit-animation: moveFromRight 300ms ease-in-out;
-moz-animation: moveFromRight 300ms ease-in-out;
-ms-animation: moveFromRight 300ms ease-in-out;
-o-animation: moveFromRight 300ms ease-in-out;
animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover>a {
color: #e67e22;
}

.mcd-menu li a.active {
position: relative;
color: #e67e22;
border: 0;
/*border-top: 4px solid #e67e22;
border-bottom: 4px solid #e67e22;
margin-top: -4px;*/
box-shadow: 0 0 5px #DDD;
-moz-box-shadow: 0 0 5px #DDD;
-webkit-box-shadow: 0 0 5px #DDD;
/* == */
border-left: 4px solid #e67e22;
border-right: 4px solid #e67e22;
margin: 0 -4px;
/* == */
}

.mcd-menu li a.active:before {
content: "";
position: absolute;
/*top: 0;
left: 45%;
border-top: 5px solid #e67e22;
border-left: 5px solid transparent;
border-right: 5px solid transparent;*/
/* == */
top: 42%;
left: 0;
border-left: 5px solid #e67e22;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
/* == */
}

/* == */

.mcd-menu li a.active:after {
content: "";
position: absolute;
top: 42%;
right: 0;
border-right: 5px solid #e67e22;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}

/* == */

@-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
-moz-transform:  translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
}

@-webkit-keyframes moveFromLeft {
from {
opacity: 0;
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
to {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}

@-webkit-keyframes moveFromRight {
from {
opacity: 0;
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
to {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}

.mcd-menu li ul,
.mcd-menu li ul li ul {
position: absolute;
height: auto;
min-width: 200px;
padding: 0;
margin: 0;
background: #FFF;
/*border-top: 4px solid #e67e22;*/
opacity: 0;
visibility: hidden;
transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-webkit-transition: all 300ms linear;
/*top: 130px;*/
z-index: 1000;
/* == */
left: 280px;
top: 0px;
/*ul {
display: block;
opacity: 1;
visibility: visible;
/*top: 100px;*/
/* == */
left: 250px;
/* == */
}

/*.mcd-menu li ul li {
float: none;
}*/

.mcd-menu li ul li a {
padding: 10px;
text-align: left;
border: 0;
border-bottom: 1px solid #EEE;
/* == */
height: auto;
/* == */
}

.mcd-menu li ul li a i {
font-size: 16px;
display: inline-block;
margin: 0 10px 0 0;
}

.mcd-menu li ul li ul {
left: 230px;
top: 0;
border: 0;
border-left: 4px solid #e67e22;
}

.mcd-menu li ul li ul:before {
content: "";
position: absolute;
top: 15px;
/*left: -14px;*/
/* == */
left: -9px;
/* == */
border-right: 5px solid #e67e22;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}

.mcd-menu li ul li:hover>ul {
top: 0px;
left: 200px;
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.mcd-menu {
margin-left: 10px;
}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.mcd-menu {
width: 200px;
}
.mcd-menu li a {
height: 30px;
}
.mcd-menu li a i {
font-size: 22px;
}
.mcd-menu li a strong {
font-size: 12px;
}
.mcd-menu li a small {
font-size: 10px;
}
.mcd-menu li a.search input {
width: 120px;
font-size: 12px;
}
.mcd-menu li a.search buton {
padding: 8px 10px 9px 10px;
}
.mcd-menu li>ul {
min-width: 180px;
}
.mcd-menu li:hover>ul {
min-width: 180px;
left: 200px;
}
.mcd-menu li ul li>ul,
.mcd-menu li ul li ul li>ul {
min-width: 150px;
}
.mcd-menu li ul li:hover>ul {
left: 180px;
min-width: 150px;
}
.mcd-menu li ul li ul li:hover>ul {
left: 150px;
min-width: 150px;
}
.mcd-menu li ul a {
font-size: 12px;
}
.mcd-menu li ul a i {
font-size:  14px;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.mcd-menu {
width: 50px;
}
.mcd-menu li a {
position: relative;
padding: 12px 16px;
height: 20px;
}
.mcd-menu li a small {
display: none;
}
.mcd-menu li a strong {
display: none;
}
.mcd-menu li a:hover strong,
.mcd-menu li a.active strong {
display: block;
font-size: 10px;
padding: 3px 0;
position: absolute;
bottom: 0px;
left: 0;
background: #e67e22;
color: #FFF;
min-width: 100%;
text-transform: lowercase;
font-weight: normal;
text-align: center;
}
.mcd-menu li .search {
display: none;
}
.mcd-menu li>ul {
min-width: 180px;
left: 70px;
}
.mcd-menu li:hover>ul {
min-width: 180px;
left: 50px;
}
.mcd-menu li ul li>ul,
.mcd-menu li ul li ul li>ul {
min-width: 150px;
}
.mcd-menu li ul li:hover>ul {
left: 180px;
min-width: 150px;
}
.mcd-menu li ul li ul li>ul {
left: 35px;
top: 45px;
border: 0;
border-top: 4px solid #e67e22;
}
.mcd-menu li ul li ul li>ul:before {
left: 30px;
top: -9px;
border: 0;
border-bottom: 5px solid #e67e22;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.mcd-menu li ul li ul li:hover>ul {
left: 30px;
min-width: 150px;
top: 35px;
}
.mcd-menu li ul a {
font-size: 12px;
}
.mcd-menu li ul a i {
font-size: 14px;
}
}

@media only screen and (max-width: 479px) {
.mcd-menu {
width: 50px;
}
.mcd-menu li a {
position: relative;
padding: 12px 16px;
height: 20px;
}
.mcd-menu li a small {
display: none;
}
.mcd-menu li a strong {
display: none;
}
.mcd-menu li a:hover strong,
.mcd-menu li a.active strong {
display: block;
font-size: 10px;
padding: 3px 0;
position: absolute;
bottom: 0px;
left: 0;
background: #e67e22;
color: #FFF;
min-width: 100%;
text-transform: lowercase;
font-weight: normal;
text-align:  center;
}
.mcd-menu li .search {
/* placeholder */
}
}[/code]
[code][*]





[list]

[url=#Menu_1]
[/i][b]Overview[/b]
[/url]

[*]
[url=#Menu_2]
[i][/i][b]Terms[/b]
[/url]

[*]
[url=#Menu_3]
[i][/i][b]System[/b]
[/url]



Подробнее здесь: [url]https://stackoverflow.com/questions/79132852/bootstrap-5-vertical-navbar-on-left-unable-to-use-controls-to-the-right-of-it[/url]