Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Sports
0 / 0 / 0
Регистрация: 22.01.2017
Сообщений: 55
#1

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

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

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

и при сжатии получается, 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):

Навигационное меню на Bootstrap - HTML, CSS
Пожалуйста, подскажите как сделать такое меню такое, как на этом сайте http://kursy-mo.ru ???

навигационное меню - HTML, CSS
нужно создать двух уровневое навигационное меню как это сделать? оно должно быть таким как показано ниже на изображении,я сделал вот так: ...

Навигационное меню - HTML, CSS
Проблема состоит в следующем. Как сделать навигационное меню - выпадающий список в HTML? То есть мне нужно не просто &quot; на главную, личный...

Сделать навигационное меню - HTML, CSS
Привет. Помогите сделать горизонтальное навигационное меню, в верху страницы, чтобы немного выходило за границы, пример: Загружайте...

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

Как построить навигационное меню - HTML, CSS
Как построить таблицу? Не могу выровнять пл центру текст. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...

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

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

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

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

Bootstrap меню - HTML, CSS
Подскажите пожалуйста, я не знаю как в бутстрапе сделать меню так, чтобы у кнопок были свои картинки как здесь http://kuhnya-sushi.pe.hu....


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

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

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