Bootstrap - как создать горизонтальную панель навигации, которая расширяется на 100% по сравнению с моим фоновым изображением? - PullRequest
Новая
       48

Bootstrap - как создать горизонтальную панель навигации, которая расширяется на 100% по сравнению с моим фоновым изображением?

0 голосов
/ 07 апреля 2020

Я изо всех сил пытаюсь создать панель навигации, которая будет иметь ширину моего сайта, которая составляет 1200 пикселей. Я не могу заставить его оставаться в фиксированном положении под фоновым изображением.

Кроме того, когда я уменьшаю размер до планшета / мобильного телефона, макет разрывается и влияет на верхнюю панель навигации.

Это мой макет того, как я хочу, чтобы он выглядел 

/* Global styles */

body {
    font-family: 'Helvetica', sans-serif;
    font-size: 1.2rem; 
    
}

/* background image */

.iw-bg-image {
    background-image: url('./image/desktop_hero.jpg');
    background-repeat: no-repeat;
}


/* Navigation */
.my-nav {
    background-color: #e4137fde;
}

/* nav link text hover color */
.nav-link:hover {
  color: #e4137e !important;
}

/* Main header text & button*/
.iw-header {
    color: aliceblue;
    font-size: 4rem;
    font-weight: 600;
    margin-top: 200px;
    margin-left: 80px;
}

.appy-discription {
    color: white;
    padding: 0 80px;
}

button {
    margin-left: 80px;
    margin-bottom: 40px;
}

.btn-background {
    color: white;
    background-color: #e4137fde;
    border-radius: 0;
}

.fullwidth-nav {
    background-color: #e4137fde;
    height: 50px;
    width: 100%;
}
image
...