Bootscore
-
|
Is it possible to have the code for the navbar with collapse element and not with offcanvas? |
Beta Was this translation helpful? Give feedback.
Answered by
crftwrk
Feb 1, 2023
Replies: 2 comments 1 reply
-
|
Of course, it's possible. Change offcanvas to collapse component and adjust header.php<?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">
<nav class="navbar navbar-expand-md navbar-light">
<div class="container">
<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>
<div class="header-actions d-flex d-lg-none 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>
<!-- Search Toggler Mobile -->
<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="fa-solid fa-magnifying-glass"></i><span class="visually-hidden-focusable">Search</span>
</button>
<!-- Navbar Toggler -->
<button class="btn btn-outline-secondary ms-1 ms-md-2" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu">
<i class="fa-solid fa-bars"></i><span class="visually-hidden-focusable">Menu</span>
</button>
</div><!-- .header-actions -->
<div class="collapse navbar-collapse" id="main-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
<div class="header-actions d-none d-lg-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="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>
</div><!-- .header-actions -->
</div>
</nav>
<!-- 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 -->
</header><!-- #masthead --> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
ant31zac
-
|
thanks for the code |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
You`re welcome 👍 Please mark solution as answered |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Of course, it's possible. Change offcanvas to collapse component and adjust
header-actionsto fit on mobile. Fine-tune by yourself:header.php