Адаптивность для мобильных устройств для NavBar [закрыто] ⇐ CSS

[Anonymous]

У меня возникла техническая проблема с моим сайтом, и мне нужна помощь. Панель навигации (navbar) не отображается на маленьких экранах, хотя на мобильных устройствах она отлично работает. Крайне важно, чтобы он отображался полностью, так как он содержит кнопки, которые служат ссылками на другие страницы и различные важные функции. Может ли кто-нибудь подсказать мне, как исправить эту ошибку, чтобы панель навигации была видна на всех типах устройств?

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

.section-1 {
height: 800px;
}

/* Estilos específicos para dispositivos menores ou iguais a 600px (responsivo) */

@media (max-width: 767px) {
.section-1 {
height: 800px;
}
}

@media(max-width: 767px) {
.container {
padding-top: 0;
min-height: 700px;
}
.background-curva {
position: absolute;
right: 0;
top: 0;
width: 20rem;
}
.image-overlay {
position: absolute;
width: 100%;
top: 8rem;
text-align: center;
}
}

.text-small {
font-size: 15px;
}

.vector {
position: relative;
width: 32rem;
}

@media (min-width: 768px) {
.vector {
right: -12rem;
top: 2rem;
}
}

.background-curva {
position: absolute;
right: 0;
z-index: 0;
width: 60%;
height: auto;
max-width: 100%;
margin-top: 0;
}

a {
text-decoration: none !important;
color: #fff;
}

.last-link {
text-decoration: underline !important;
}

.graficos {
position: absolute;
top: 6rem;
right: 13rem;
}

@media(max-width: 767px) {
.graficos {
position: absolute;
top: 3rem;
right: 2rem;
}
}

@media (max-width: 767px) {
.text-md-left {
text-align: center;
}
}

h1 {
margin-top: 10rem;
font-size: 4rem;
}

@media(max-width: 767px) {
h1 {
margin-top: 5rem;
font-size: 4rem;
}
}

.text-md-left {
line-height: 1.1;
padding: 0px;
}

#menu {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
left: 12px;
right: 0px;
align-items: center;
height: 4rem;
background-color: #fff;
}

#menu .btn-primary {
margin-right: 12px;
}

#menu a {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
color: black;
}

.logo-ui {
position: relative;
left: 15.5rem;
}

@media(max-width: 767px) {
.logo-ui {
position: absolute;
width: 42%;
margin-top: -2.5rem;
z-index: 0;
left: 0px;
}
}

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

[img]/assets/img/logo.svg[/img]

Home
Resumo
Depoimentos
Dúvidas
Planos
Experimente Grátis
Entrar




Tudo o que você
precisa e muito mais


Organize suas finanças de maneira eficiente, mantenha um controle atualizado do seu estoque de forma organizada e centralize as informações dos seus clientes em um único local, visando garantir um atendimento eficaz e aprimorado.

[img]./assets/img/7766406_3759172_1.png[/img]

Experimente Grátis


[img]/assets/img/design-vector.png[/img]




```

На маленьких экранах логотип отображается только слева, и это работает идеально на больших экранах.

Подробнее здесь: https://stackoverflow.com/questions/783 ... for-navbar