Bootscore
-
|
Hello Basti, i followed 2 precedent: https://github.com/orgs/bootscore/discussions/408 Menu is working well also with sticky nav, but its still strange on mobile, its basically opens as desktop. am i missing something? in my js My header: `<?php /**
?> Search for: Search ` |
Beta Was this translation helpful? Give feedback.
Answered by
crftwrk
Mar 20, 2023
Replies: 5 comments 6 replies
-
|
Hi Richard, cannot read exactly your example, because your code is not well formatted in your comment 😎 Offcanvas seems to fine on mobile? What's wrong there? But your hiding script seems not working well. It hides navbar when scrolling back to top. Try this one, of course inside the JS// Header up on scroll down, down on scroll up
var lastScrollTop = 0;
$(window).scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
if (!$('body').hasClass('down')) {
$('body').addClass('down')
}
} else {
$('body').removeClass('down')
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down')
}
});CSS.autohide {
transition: transform .25s .1s ease-in-out;
}
.down .autohide {
transform: translate3d(0, -100%, 0);
}ps. Remove following snippet in your // Close offcanvas on click a, keep .dropdown-menu open
$('.offcanvas a:not(.dropdown-toggle, .remove_from_cart_button)').on('click', function () {
$('.offcanvas').offcanvas('hide');
}); |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Hello Basti! I think my auto hide is ok actually. It's fast and responsive.
The problem is on off canvas mobile menu. It's behavior like a desktop one
and not going under father category. It's open up another windows on the
side.
Il Sab 18 Mar 2023, 17:19 Basti ***@***.***> ha scritto:
… Hi Richard,
cannot read exactly your example, because your code is not well formatted
in your comment 😎
Offcanvas seems to fine on mobile? What's wrong there?
But your hiding script seems not working well. It hides navbar when
scrolling back to top. Try this one, of course inside the jQuery(function
($) {...}); wrapper:
JS
// Header up on scroll down, down on scroll upvar lastScrollTop = 0;$(window).scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
if (!$('body').hasClass('down')) {
$('body').addClass('down')
}
} else {
$('body').removeClass('down')
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down')
}});
CSS
.autohide {
transition: transform .25s .1s ease-in-out;
}
.down .autohide {
transform: translate3d(0, -100%, 0);
}
ps. Remove this snippet in your custom.js. This is already merged into
main-theme:
// Close offcanvas on click a, keep .dropdown-menu open$('.offcanvas a:not(.dropdown-toggle, .remove_from_cart_button)').on('click', function () {
$('.offcanvas').offcanvas('hide');});
—
Reply to this email directly, view it on GitHub
<#427 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ANQHWETNDZ3VJPA2YQYNXF3W4XOBBANCNFSM6AAAAAAV7IIS2M>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
4 replies
-
|
View your site on your phone (not a tiny window on your desktop), scroll down and back to top, you will see ;-) Pls post your complete header.php here with correct syntax https://stackoverflow.com/questions/21729960/how-do-i-use-syntax-highlighting-in-php-within-a-markdown-github-gist. I will check it. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
``document.addEventListener("DOMContentLoaded", function(){ el_autohide = document.querySelector('.autohide'); // add padding-top to bady (if necessary) navbar_height = document.querySelector('.navbar').offsetHeight; document.body.style.paddingTop = navbar_height + 'px'; if(el_autohide){ var last_scroll_top = 0; window.addEventListener('scroll', function() { let scroll_top = window.scrollY; if(scroll_top < last_scroll_top) { el_autohide.classList.remove('scrolled-down'); el_autohide.classList.add('scrolled-up'); } else { el_autohide.classList.remove('scrolled-up'); el_autohide.classList.add('scrolled-down'); } last_scroll_top = scroll_top; }); // window.addEventListener } // if }); // DOMContentLoaded end `` |
Beta Was this translation helpful? Give feedback.
-
|
Hi Richard, sorry, it's me again ;-) Your code isn't formatted and PHP is mixed with some JS. In conclusion, I cannot read between the lines and guess what you mean. Please make sure that you use the correct markdown syntax and check if the code is exactly formatted as in your Thanks 😎 |
Beta Was this translation helpful? Give feedback.
-
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Bootscore
*
* @version 5.2.0.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/site.webmanifest">
<link rel="mask-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/safari-pinned-tab.svg" color="#0d6efd">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<?php wp_head(); ?>
</head>
<body data-bs-spy="scroll" data-bs-target="#toc" <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<header id="masthead" class="site-header">
<div class="autohide fixed-top bg-light">
<nav id="nav-main" class="navbar navbar-expand-lg bg-light shadow-sm">
<div class="container">
<!-- Navbar Brand -->
<a class="navbar-brand xs d-md-none" href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/img/logo/logo-sm.svg" alt="logo" class="logo xs"></a>
<a class="navbar-brand md d-none d-md-block" href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/img/logo/logo.svg" alt="logo" class="logo md"></a>
<!-- Offcanvas Navbar -->
<div class="d-none d-lg-block offcanvas offcanvas-end" tabindex="-1" id="offcanvas-navbar">
<div class="offcanvas-header bg-light">
<span class="h5 mb-0"><?php esc_html_e('Menu', 'bootscore'); ?></span>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Bootstrap 5 Nav Walker Main Menu -->
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="bootscore-navbar" class="navbar-nav ms-auto %2$s">%3$s</ul>',
'depth' => 3,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
<!-- Bootstrap 5 Nav Walker Main Menu End -->
<!-- Pulsanti social! - Off-canvas -->
<div class="d-lg-none mt-3 pt-4 pb-4 border-top"><div class="row g-3"><div class="col-6"> <a href="https://www.instagram.com/northwestalps" target="_blank" class="btn btn-dark w-100 btn-s-insta"><i class="fa-brands fa-instagram"></i> Instagram</a></div><div class="col-6"> <a class="btn btn-dark w-100" href="https://twitter.com" target="_blank" title="twitter @Northwestalps" rel="noopener"><i class="fa-brands fa-twitter"></i> Twitter</a></div></div></div>
<!-- Fine Pulsanti social! - Off-canvas -->
</div>
</div>
<div class="header-actions d-flex align-items-center">
<!-- Top Nav Widget -->
<div class="top-nav-widget">
<?php if (is_active_sidebar('top-nav')) : ?>
<div>
<?php dynamic_sidebar('top-nav'); ?>
</div>
<?php endif; ?>
</div>
<!-- Searchform Large -->
<div class="d-none d-lg-block ms-1 ms-md-2 top-nav-search-lg">
<?php if (is_active_sidebar('top-nav-search')) : ?>
<div>
<?php dynamic_sidebar('top-nav-search'); ?>
</div>
<?php endif; ?>
</div>
<!-- Pulsantini + darkmode-->
<div class="header-actions d-flex align-items-center">
<div class="top-nav-widget">
<div>
<div class="widget_text ms-3">
<div class="widget-title d-none">Dark Mode &, Download & GitHub</div>
<div class="textwidget custom-html-widget">
<div class="d-flex">
<div class="d-flex align-items-center">
<div class="dark-mode-switch form-check form-switch"> <input class="form-check-input btn-toggle position-relative cursor-pointer" type="checkbox" id="dark-mode" wtx-context="7784E54D-6465-40F9-8726-C09FC45CD406"></div></div>
</div>
</div>
</div>
</div>
</div>
<li id="menu-item-21537" class="ms-2 d-none d-lg-block menu-item menu-item-type-custom menu-item-object-custom nav-item nav-item-21537">
<a target="_blank" href="https://www.instagram.com/northwestalps" class="nav-link ">
<i class="fa-brands fa-instagram"></i></a></li>
<li id="menu-item-21538" class="ms-2 d-none d-lg-block menu-item menu-item-type-custom menu-item-object-custom nav-item nav-item-21537">
<a target="_blank" href="#" class="nav-link ">
<i class="fa-brands fa-twitter"></i></a></li>
<li id="menu-item-21539" class="ms-2 d-none d-lg-block menu-item menu-item-type-custom menu-item-object-custom nav-item nav-item-21537">
<a target="_blank" href="https://www.youtube.com/@northwestalps" class="nav-link ">
<i class="fa-brands fa-youtube"></i></a></li>
<button class="btn btn-outline-secondary ms-1 ms-md-2 top-nav-search-md" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
<i class="fas fa-search"></i><span class="visually-hidden-focusable">Cerca</span> </button>
<!-- Navbar Toggler BURGER-->
<button class="btn btn-outline-secondary d-lg-none ms-1 ms-md-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#cristiano" aria-controls="offcanvas-navbar">
<i class="fa-solid fa-bars"></i><span class="visually-hidden-focusable">Menu</span>
</button>
</div><!-- .header-actions -->
</div><!-- .container -->
</nav><!-- .navbar -->
<!-- Collapse search -->
<div class="container collapse" id="collapse-search" style=""><div class="mb-2"><div class="top-nav-search"><form role="search" method="get" class="searchform woocommerce-product-search" action="https://www.northwestalps.com/"><div class="input-group"> <input class="form-control" type="search" id="woocommerce-product-search-field-0" placeholder="Cerca sul sito..." value="" name="s"> <label class="visually-hidden-focusable" for="woocommerce-product-search-field-0">Search for:</label> <input type="hidden" name="post_type" value="product"> <button type="submit" value="Search" class="input-group-text btn btn-outline-secondary wp-element-button"><i class="fa-solid fa-magnifying-glass"></i><span class="visually-hidden-focusable">Search</span></button></div></form></div></div></div>
<!-- Top Nav Search Mobile Collapse -->
<div class="collapse container d-lg-none" id="collapse-search">
<?php if (is_active_sidebar('top-nav-search')) : ?>
<div class="mb-2">
<?php dynamic_sidebar('top-nav-search'); ?>
</div>
<?php endif; ?>
</div>
</div><!-- .fixed-top .bg-light -->
<!-- Offcanvas Navbar -->
<div class="d-lg-none offcanvas offcanvas-end" tabindex="-1" id="cristiano">
<div class="offcanvas-header bg-light">
<span class="h5 mb-0"><?php esc_html_e('Menu', 'bootscore'); ?></span>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Bootstrap 5 Nav Walker Main Menu -->
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="bootscore-navbar" class="navbar-nav ms-auto %2$s">%3$s</ul>',
'depth' => 3,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
<!-- Bootstrap 5 Nav Walker Main Menu End -->
<!-- Pulsanti social! - Off-canvas -->
<div class="d-lg-none mt-3 pt-4 pb-4 border-top">
<div class="row g-3"><div class="col-6">
<a href="https://www.instagram.com/northwestalps" target="_blank" class="btn btn-dark w-100 btn-s-insta"><i class="fa-brands fa-instagram"></i> Instagram</a>
</div>
<div class="col-6">
<a class="btn btn-dark w-100" href="https://twitter.com" target="_blank" title="twitter @Northwestalps" rel="noopener"><i class="fa-brands fa-twitter"></i> Twitter</a>
</div>
<div class="col-6">
<a class="btn btn-dark w-100" href="https://www.youtube.com/@northwestalps" target="_blank" title="yutube @Northwestalps" rel="noopener"><i class="fa-brands fa-youtube"></i> Youtube</a>
</div>
</div>
</div>
<!-- Fine Pulsanti social! - Off-canvas -->
</div>
</div>
<div class="header-actions d-flex align-items-center">
</div>
</header><!-- #masthead --> |
Beta Was this translation helpful? Give feedback.
0 replies
-
document.addEventListener("DOMContentLoaded", function(){
el_autohide = document.querySelector('.autohide');// add padding-top to bady (if necessary) navbar_height = document.querySelector('.navbar').offsetHeight; document.body.style.paddingTop = navbar_height + 'px'; if(el_autohide){ var last_scroll_top = 0; window.addEventListener('scroll', function() { let scroll_top = window.scrollY; if(scroll_top < last_scroll_top) { el_autohide.classList.remove('scrolled-down'); el_autohide.classList.add('scrolled-up'); } else { el_autohide.classList.remove('scrolled-up'); el_autohide.classList.add('scrolled-down'); } last_scroll_top = scroll_top; }); // window.addEventListener } // if }); // DOMContentLoaded end |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Oh sh*t i cant even make a markdownto display properly xD |
Beta Was this translation helpful? Give feedback.
-
|
Ok, you should check the syntax highlighting markdowns to post further code snippets correctly. They work for all langgages like css, scss, js, php, html etc. Awesome simple, but awesome useful. Here is a working Solved? <?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Bootscore
*
* @version 5.2.0.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/site.webmanifest">
<link rel="mask-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon/safari-pinned-tab.svg" color="#0d6efd">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<header id="masthead" class="site-header">
<div class="fixed-top bg-light autohide">
<nav id="nav-main" class="navbar navbar-expand-lg">
<div class="container">
<!-- Navbar Brand -->
<a class="navbar-brand xs d-md-none" href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/img/logo/logo-sm.svg" alt="logo" class="logo xs"></a>
<a class="navbar-brand md d-none d-md-block" href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/img/logo/logo.svg" alt="logo" class="logo md"></a>
<!-- Bootstrap 5 Nav Walker Main Menu -->
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="bootscore-navbar" class="d-none d-lg-flex navbar-nav ms-auto %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
<!-- Bootstrap 5 Nav Walker Main Menu End -->
<div class="header-actions d-flex align-items-center">
<!-- Top Nav Widget -->
<div class="top-nav-widget">
<?php if (is_active_sidebar('top-nav')) : ?>
<div>
<?php dynamic_sidebar('top-nav'); ?>
</div>
<?php endif; ?>
</div>
<!-- Searchform Large -->
<div class="d-none d-lg-block ms-1 ms-md-2 top-nav-search-lg">
<?php if (is_active_sidebar('top-nav-search')) : ?>
<div>
<?php dynamic_sidebar('top-nav-search'); ?>
</div>
<?php endif; ?>
</div>
<!-- Search Toggler Mobile -->
<button class="btn btn-outline-secondary d-lg-none ms-1 ms-md-2 top-nav-search-md" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
<i class="fa-solid fa-magnifying-glass"></i><span class="visually-hidden-focusable">Search</span>
</button>
<!-- Navbar Toggler -->
<button class="btn btn-outline-secondary d-lg-none ms-1 ms-md-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-navbar" aria-controls="offcanvas-navbar">
<i class="fa-solid fa-bars"></i><span class="visually-hidden-focusable">Menu</span>
</button>
</div><!-- .header-actions -->
</div><!-- .container -->
</nav><!-- .navbar -->
<!-- Top Nav Search Mobile Collapse -->
<div class="collapse container d-lg-none" id="collapse-search">
<?php if (is_active_sidebar('top-nav-search')) : ?>
<div class="mb-2">
<?php dynamic_sidebar('top-nav-search'); ?>
</div>
<?php endif; ?>
</div>
</div><!-- .fixed-top .bg-light -->
<nav class="navbar d-lg-none">
<!-- Offcanvas Navbar -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-navbar">
<div class="offcanvas-header bg-light">
<span class="h5 mb-0"><?php esc_html_e('Menu', 'bootscore'); ?></span>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Bootstrap 5 Nav Walker Main Menu -->
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="bootscore-navbar-1" class="navbar-nav %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
<!-- Bootstrap 5 Nav Walker Main Menu End -->
</div>
</div>
</nav>
</header><!-- #masthead --> |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Ty so much for your time. Its working! I just dont understand what really changed from autohide, cause for me it was working well. Anyway! I think even if i dont see any changes, you know stuff. Once again Basti ty! <3 |
Beta Was this translation helpful? Give feedback.
Answer selected by
phrizm
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ok, you should check the syntax highlighting markdowns to post further code snippets correctly. They work for all langgages like css, scss, js, php, html etc. Awesome simple, but awesome useful.
Here is a working
header.phpwith autohide and offcanvas outside thefixed-top. Done with the defaultheader.php, you have to do your changes like the 3level depth menu again. If you want to get the autohide work properly on real mobile devices, use the JS and CSS snippets from my previous comment.Solved?