Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Sports
0 / 0 / 5
Регистрация: 22.01.2017
Сообщений: 55
#1

Навигационное меню заходит на секцию, Bootstrap - HTML, CSS

23.03.2017, 11:12. Просмотров 535. Ответов 3
Метки нет (Все метки)

Добрый день всем и за ранее благодарен, тому кто откликнется
Почему навигационное меню для мобильных приложений, заходит на следующею секцию или под секцию, по настроению как говорится (адаптивная верстка).
То есть header на section

http://www.cyberforum.ru/html/thread1418091.html
и при сжатии получается, setcion наоборот заходит на header

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap</title>
  <!--<link rel="stylesheet" href="bootstrap/css/bootstrap.css">-->
  <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="fonts/Socialico/stylesheet.css">
  <link rel="stylesheet" href="custom_bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles and fonts/font.css">
  <!--<link rel="stylesheet" href="styles and fonts/style.css">-->
  <link rel="stylesheet" href="styles and fonts/adaptiveStyle.css">
</head>
<body>
<header>
  <nav class="navbar navbar-default">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="img/logo/logo.png" alt="logo"></a>
      </div>
 
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
 
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">HOME</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">work</a></li>
          <li><a href="#">TEAM</a></li>
          <li><a href="#">services</a></li>
          <li><a href="#">FEATURES</a></li>
          <li><a href="#">contact</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
 
</header>
 
 <!--<header>-->
    <!--<div class="container">-->
        <!--<div class="row">-->
        <!--<div class="col-sm-3">-->
            <!--<div class="logo">-->
                <!--<a href="#">-->
                <!--<img src="img/logo/logo.png" alt="logo"></a>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="col-sm-9">-->
            <!--<nav>-->
                <!--<ol>-->
                    <!--<li><a href="#">HOME</a></li>-->
                    <!--<li><a href="#">about</a></li>-->
                    <!--<li><a href="#">work</a></li>-->
                    <!--<li><a href="#">TEAM</a></li>-->
                    <!--<li><a href="#">services</a></li>-->
                    <!--<li><a href="#">FEATURES</a></li>-->
                    <!--<li><a href="#">contact</a></li>-->
                <!--</ol>-->
            <!--</nav>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
<!--</header>-->
<section class="slider">
    <div class="container">
        <div class="row">
        <div class="picture col-sm-9">
            <h3>welcome to our marketplace</h3>
            <p class="min-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi metus, tristique ndolor<br> non, ornare sagittis dolor. Nulla vestibulu lacus ...</p>
            <div class="buttons">
                <a href="#" class="button">view more</a>
                <a href="#" class="button">video tour</a>
            </div>
        </div>
        </div>
    </div>
</section>
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="custom_bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
* {
    margin: 0;
    padding: 0;
}
ol, li {
    margin-bottom: 0;
}
body, html {
    height: 100%;
}
.container {
    margin: 0 auto;
    position: relative;
}
.container:after {
    display: block;
    content: '';
    clear: both;
}
header {
    line-height: 82px;
    background-color: #1d2126;
}
.logo a {
    cursor: pointer;
    float: left;
}
nav {
    /*float: right;*/
}
nav.navbar {
    background-color: #1d2126;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    height: 80px;
    line-height: 80px;
    text-transform: uppercase;
}
/*nav ol li {*/
    /*list-style-type: none;*/
    /*display: inline-block;*/
/*}*/
.navbar-collapse.collapse[aria-expanded="false"] {
    height: 80px !important;
    line-height: 80px !important;
}
.navbar-default .navbar-collapse {
    border: none;
}
.navbar-header {
    border: 0;
}
.navbar-header>a>img {
    padding: 15px 0;
}
.navbar-default .navbar-nav>li {
    margin-top: 25px;
}
.navbar-default .navbar-nav>li>a {
    text-transform: uppercase;
    color: #a4aead;
    border: 3px solid transparent;
    border-radius: 3px;
    padding: 7px 10px 7px 10px;
    /*padding: 5px 0;*/
    margin-right: 25px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Open Sans Semibold', serif;
}
.navbar-default .navbar-nav>li>a:hover {
    border-color: #5b6168;
 
    color: #a4aead;
    /*padding: 7px 10px 7px 10px;*/
}
/*nav ol li a:first-child {*/
    /*margin-right: 0;*/
/*}*/
a:active, a:link, a:hover, a:visited {
    text-decoration: none;
}
.slider {
    /*height: 661px;*/
    height: 34.75513428120063vw;
    background: url(../img/banner/pic_header.jpg) top center no-repeat;
}
.slider .container {
    height: 100%;
}
.picture {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
h3 {
    font-family: 'Quattrocento Sans Bold', Arial, serif;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    position: relative;
    margin-bottom: 25px;
    display: inline-block;
}
.min-text {
    font-family: 'Open Sans Regular', serif;
    font-size: 16px;
    color: #b0b3bc;
    padding-bottom: 46px;
}
.button {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Quattrocento Sans Bold', Arial, serif;
    border: 3px solid #fff;
    border-radius: 3px;
    color: #fff;
    padding: 17px 25px 17px 25px;
    margin-right: 11px;
    display: inline-block;
}
.button:hover {
    background-color: #23b7a4;
    border: 3px solid #23b7a4;
    border-radius: 3px;
    color: #fff;
}
.button:last-child {
    margin-right: 0;
}
вот часть макета
0
Миниатюры
Навигационное меню заходит на секцию, Bootstrap  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.03.2017, 11:12
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Навигационное меню заходит на секцию, Bootstrap (HTML, CSS):

Навигационное меню
Проблема состоит в следующем. Как сделать навигационное меню - выпадающий...

навигационное меню
нужно создать двух уровневое навигационное меню как это сделать? оно должно...

Сделать навигационное меню
Привет. Помогите сделать горизонтальное навигационное меню, в верху страницы,...

Навигационное меню гуляет(
Подскажите что и где прописать:cry: Не далек я в этом, активное навигационное...

Как построить навигационное меню
Как построить таблицу? Не могу выровнять пл центру текст. &lt;!DOCTYPE html&gt;...

3
Sports
0 / 0 / 5
Регистрация: 22.01.2017
Сообщений: 55
27.03.2017, 10:20  [ТС] #2
Благодарю модераторов и т.д. за то, что помогли разобраться!
0
mrtoxas
Модератор
Эксперт HTML/CSS
2548 / 1885 / 1177
Регистрация: 12.07.2015
Сообщений: 5,091
Записей в блоге: 3
27.03.2017, 10:52 #3
Sports, Не надо так остро реагировать, если на ваш вопрос никто не ответил. Это благотворительный форум и вам тут никто ничего не должен. А причем тут модераторы и т.д., вообще не понятно.
А по теме, чего бы не наезжать контенту секции на шапку, если вы указали относительную высоту для этой секции?
Вот, пример построения страницы с каруселью Bootstrap. Разбирайте как там все устроено.
Вам в предыдущих темах уже давали ссылки на примеры, вы их проигнорировали.
1
Sports
0 / 0 / 5
Регистрация: 22.01.2017
Сообщений: 55
27.03.2017, 22:57  [ТС] #4
Благодарю за совет, с навигацией разобрался!!!
Вот только теперь секция заходит на навигационное меню
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.03.2017, 22:57
Привет! Вот еще темы с решениями:

Горизонтальный список (навигационное меню)
Правильно ли я делаю, если мне нужно горизонтальное навигационное меню, чтобы...

навигационное меню в одном css-файле
Можно ли как-то прописать меню навигации в общем css-файле, отвечающем за...

Bootstrap и адаптивное меню. При уменьшении меню распадается на несколько строк
меню до уменьшения выглядит так после уменьшения так используется...

Bootstrap меню
Подскажите пожалуйста, я не знаю как в бутстрапе сделать меню так, чтобы у...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru