This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
leonfury9560712
I have a menu with links as anchors for smooth scroll to the other page elements, but whenever i use link and then scroll back - menu is gone. There's a button in the header as well, but only menu affected by it. What did i do wrong?
Html :
<header class="header">
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-transparent">
<nav class="headmenu my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="/">Главная</a>
<a class="p-2 text-dark" href="#portfolio">Портфолио</a>
<a class="p-2 text-dark" href="#uslugi">Услуги</a>
<a class="p-2 text-dark" href="#onas">О нас</a>
</nav>
{% if user %}
<div class="droplogin-wrapper">
<a class="dropbtn btn btn-outline-dark" onclick="myFunction()" href="#">Аккаунт</a>
<div id="droplogin" class="droplogin">
<a href="/auth">Настройки</a>
<a data-request="onLogout" data-request-data="redirect: '/'" href="#">Выход</a>
</div>
</div>
{% else %}
<a class="logbt btn btn-outline-dark" href="/auth">Войти</a>
{% endif %}
</div>
</header>Css:
html {
overflow-x: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 0.08em;
margin: 0;
padding: 0;
background: linear-gradient(1.15deg, rgba(214, 214, 214, 0.7) 21.88%, rgba(206, 206, 206, 0) 80.11%);
background-size: cover;
overflow-x: hidden;
overflow-y: hidden;
}
.headmenu {
margin-left: 8.68rem;
}
.headmenu a {
margin-right: 7.3rem;
color: #000;
text-shadow: 0px 3px 4px rgba(0,0,0,0.5);
text-decoration: none;
font-size: 17px;
font-weight: 600;
}
.logbt {
position: absolute;
right: 1.5rem;
top: 0.5rem;
}That's all there is in header
And layout:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project</title>
<script type="text/javascript" src="assets/js/history.js"></script>
<script type="text/javascript">
// Обработчик back/forward событий
window.onpopstate = function(event) {
console.log("location: " + location.href + ", state: " + JSON.stringify(event.state));
};
// добавить состояние истории
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
// заменить текущее состояние
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // location: http://example.com/example.html?page=1, state: {"page":1}
history.back(); // location: http://example.com/example.html, state: null
history.go(2); // location: http://example.com/example.html?page=3, state: {"page":3}
console.log(history.state) // Object {page: 3}
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ 'assets/css/main.css'|theme }}">
<link rel="stylesheet" media="screen and (min-width: 1281px) and (max-width: 1919px)" type="text/css" href="{{ 'assets/css/media1919.css'|theme }}">
<link rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1280px)" type="text/css" href="{{ 'assets/css/media1280.css'|theme }}">
<link rel="stylesheet" media="screen and (min-width: 569px) and (max-width: 768px)" type="text/css" href="{{ 'assets/css/media768.css'|theme }}">
<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 568px)" type="text/css" href="{{ 'assets/css/media568.css'|theme }}">
<link rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 480px)" type="text/css" href="{{ 'assets/css/media480.css'|theme }}">
<link rel="stylesheet" media="screen and (max-width: 320px)" type="text/css" href="{{ 'assets/css/media320.css'|theme }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
{% styles %}
</head>
<body>
<header id="layout-header">
{% partial 'header' %}
</header>
{% page %}
<footer id="layout-footer">
{% partial 'footer' %}
</footer>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
if( window.innerWidth > 768 ) {
jQuery(function(f){
var element = f('#topbutton');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 1200 ? 'In': 'Out')](500);
});
});
};
</script>
<script type="text/javascript">
$(function(gallery) {
$('#gallery > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'1280px'},500);
if( window.innerWidth < 1920 ) {
$this.stop().animate({'width':'1024px'},500);
};
if( window.innerWidth < 1280 ) {
$this.stop().animate({'width':'720px'},500);
};
if( window.innerWidth < 768 ) {
$this.stop().animate({'width':'616px'},500);
};
if( window.innerWidth < 568 ) {
$this.stop().animate({'width':'320px'},500);
};
if( window.innerWidth < 480 ) {
$this.stop().animate({'width':'200px'},500);
};
if( window.innerWidth < 320 ) {
$this.stop().animate({'width':'150px'},500);
};
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
if( window.innerWidth < 1920 ) {
$this.stop().animate({'width':'70px'},1000);
};
if( window.innerWidth < 1280 ) {
$this.stop().animate({'width':'50px'},1000);
};
if( window.innerWidth < 768 ) {
$this.stop().animate({'width':'30px'},1000);
};
if( window.innerWidth < 568 ) {
$this.stop().animate({'width':'20px'},1000);
};
if( window.innerWidth < 480 ) {
$this.stop().animate({'width':'10px'},1000);
};
if( window.innerWidth < 320 ) {
$this.stop().animate({'width':'10px'},1000);
};
}
);
});
</script>
<script type="text/javascript">
function myFunction() {
document.getElementById("droplogin").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("droplogin");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
{% framework extras %}
{% scripts %}
</body>
</html>Last updated
mjauvin
Looks like a javascript/css problem to me.
Try removing all that javascript and see if that resolve the issue. If not, remove all css as well. If the problem is still there, report back.
leonfury9560712
mjauvin said:
Looks like a javascript/css problem to me.
Try removing all that javascript and see if that resolve the issue. If not, remove all css as well. If the problem is still there, report back.
Found the problem, it was the "overflow-y:hidden" in body in css. Thanks for your help :)
1-4 of 4