Исправлен заголовок, содержащий изображение и гамбургер-меню с прокручиваемым содержимым
Это то, что я пытаюсь сделать 
Хотя я хочу, чтобы изображение 9 и меню гамбургера были исправлены, а остальное содержимое прокручивалось.
Я изменил положение на фиксированное, и заголовок перепутался.
Это мой код:
#title_and_menu {
position: fixed;
/*was previously relative when the code worked*/
width: 100%;
}
#myHeader {
display: inline-block;
background-color: white;
}
#drop_menu {
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
cursor: pointer;
}
#drop_menu>*{
width: 35px;
height: 1px;
background-color: #c9c9c9;
margin: 6px 0;
}<body>
<div id = "title_and_menu">
<div id = "myHeader">
<img src = "https://ninepoint.cc/wp-content/themes/9pt2023/images/logo.svg" alt = "home image" width = "30" height = "30">
</div>
<div id = "drop_menu">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class=”section1” style = "background-color:#e2e2e2;width:100%">
<h2 align = "center" style = "padding-top:200px;color:#767676">Heading</h2>
<h1 align = "center" style = "color:#707070">Introduction</h1>
<p style = "margin-left:1em;margin-right:5em;padding-bottom:12.5em;color:#9f9f9f" align = "center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>@RUMBIDZAIMUKUNGUNUGWA Я сделал живой фрагмент вашего собственного кода... заголовок уже исправлен и остается сверху при прокрутке контента.. поэтому неясно, какие ожидания не оправдались
@DiegoD Это исправлено, но гамбургер-меню не отображается. Я хочу, чтобы оно отображалось как на изображении «Чего я хочу достичь»
Используя только CSS, у вас есть два варианта. Если вы используете position: fixed для меню, вам понадобится еще один относительно расположенный элемент, который действует как разделитель. Поместите его в самый верх вашего DOM и установите соответствующую высоту. Другой способ — установить position: sticky и «top: 0», чтобы разместить элемент навигации сверху и удерживать его там. Он будет учитывать следующий контент до тех пор, пока его не прокрутят.
на самом деле отображается заполнитель для гамбургера... чего вы не видите, так это пунктов меню только потому, что они пусты. Но это не имеет отношения к тому, что вы ранее говорили о работе с position: relative. Вам не хватает всей логики меню в исходном коде.
@makkusu, не могли бы вы опубликовать код разделительного элемента. <div id = "title_and_menu"> <div id = "spacer" style = "position:relative"> <div id = "myHeader"> <img src = "ninepoint.cc/wp-content/themes/9pt2023/ images/logo.svg" alt = "home image" width = "30" height = "30"> </div> <div id = "drop_menu"> <div id = "hamburger_menu"></div> <div id = "hamburger_menu"></div> <div id = "hamburger_menu"></div> </div> </div> </div>
@makkusu, это то, что я сделал. Я добавил разделитель div с относительной позицией внутри фиксированного div, но это не помогает.
при более внимательном рассмотрении я понял, что у вас на самом деле нет заполнителя для значка гамбургера, но вы на самом деле создали 3 элемента div, чтобы добиться аналогичного результата. вот почему недоразумение. Эти #hamburger_menuэлементы не являются пунктами меню! вы дали один и тот же идентификатор разным элементам... и это неверно. Вы не можете. Если вы хотите сохранить эту стратегию, попробуйте вместо этого использовать класс! В противном случае используйте настоящий значок, представляющий меню, например: Fontawesome.com/icons/bars?s=solid
@DiegoD второе изображение «Что я получаю» — это все, что я вижу на экране. Нет гамбургер-меню
и в этом причина недоразумения... потому что даже если этот HTML-код недействителен, он отображается, как и ожидалось, в Chrome (последняя версия) на рабочем столе. Пожалуйста, попробуйте изменить <div id = "hamburger_menu"></div> на <div class = "hamburger_menu"></div> и селектор стиля с #hamburger_menu на .hamburger_menu.
@makkusu Не могли бы вы опубликовать код, который делает то, что вы предлагаете?
Это то, чего вы хотите достичь: w3schools.com/howto/howto_css_fixed_menu.asp ?
@DiegoD Вместо дублирующего класса hamburger_menu я использовал этот #drop_menu>* См. редактирование
Этот вопрос похож на: Фиксированный верхний и нижний колонтитул с прокручиваемым содержимым. Если вы считаете, что это другое, отредактируйте вопрос, поясните, чем он отличается и/или как ответы на этот вопрос не помогают решить вашу проблему.
@Barnee Нет. Первое изображение в моем вопросе показывает, чего я пытаюсь достичь ссылка
Если бы у вас было только: top: 0; background: #fff; к вашему #title_and_menu в CSS, это работает, нет? или я что-то упускаю
@VincentDecaux Логотип 9. находится в правильном месте, но гамбургер-меню не отображается.
Ответы 1
Я собирался добавить это в комментарии, но это настолько запутано, что поэтому добавляю ссылки. Проблему решить очень просто: вместо position: fixed используйте position: sticky с top: 0, и она должна быть устранена.
Ниже приведен рабочий пример.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1002vh;
margin: 0;
padding: 0;
}
.mainDiv {
color: white;
width: 100%;
height: 100vh;
background-color: #1e1e1e;
display: flex;
align-items: center;
justify-content: center;
}
#title_and_menu {
position: sticky;
top:0;
/*was previously relative when the code worked*/
width: 100%;
}
#myHeader {
display: inline-block;
background-color: white;
}
#drop_menu {
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
cursor: pointer;
}
#drop_menu>* {
width: 35px;
height: 1px;
background-color: #c9c9c9;
margin: 6px 0;
}
</style>
</head>
<body>
<div id = "title_and_menu">
<div id = "myHeader">
<img src = "https://ninepoint.cc/wp-content/themes/9pt2023/images/logo.svg" alt = "home image" width = "30" height = "30">
</div>
<div id = "drop_menu">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class=”section1” style = "background-color:#e2e2e2;width:100%">
<h2 align = "center" style = "padding-top:200px;color:#767676">Heading</h2>
<h1 align = "center" style = "color:#707070">Introduction</h1>
<p style = "margin-left:1em;margin-right:5em;padding-bottom:12.5em;color:#9f9f9f" align = "center">Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</body>
</html>Содержимое выходит за пределы фиксированного заголовка, когда я применяю стиль.
@RUMBIDZAIMUKUNGUNUGWA покажи это с изображением.
Это другой код, который не указан в вопросе. @Встретиться
@Umesh Singh Я отредактировал вопрос. Я пытаюсь исправить изображение заголовка и меню гамбургера и прокрутить остальную часть содержимого.