I am creating a WordPress theme using Bootstrap and attempting to implement a top bar with three columns above the navbar. The design calls for the top bar to disappear as the user scrolls down. While I've been successful in implementing this feature, an issue arises when the sticky navbar option is selected in the customizer: the top bar overlaps the navbar. Can anyone assist with this problem? Any help would be greatly appreciated.
here is my header.php code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php wp_head(); ?>
</head>
<body
<?php body_class(); ?>>
<?php wp_body_open(); ?>
<a href="#main" class="visually-hidden-focusable"><?php esc_html_e( 'Skip to main content', 'amin' ); ?></a>
<?php
$desktop_banner_visibility = get_theme_mod('desktop_banner_visibility', true);
$mobile_banner_visibility = get_theme_mod('mobile_banner_visibility', true);
$facebook_icon_class = get_theme_mod('facebook_icon_class', 'fab fa-facebook');
$twitter_icon_class = get_theme_mod('twitter_icon_class', 'fab fa-twitter');
$instagram_icon_class = get_theme_mod('instagram_icon_class', 'fab fa-instagram');
$linkedin_icon_class = get_theme_mod('linkedin_icon_class', 'fab fa-linkedin');
if (($desktop_banner_visibility && !wp_is_mobile()) || ($mobile_banner_visibility && wp_is_mobile())) :
?>
<div class="top-bar">
<div class="container">
<div class="row ">
<div class="col-md-4 col-12">
<div class="left-column">
<!-- Left column content -->
<?php echo get_theme_mod('left_column_text', 'Left Column Default Text'); ?>
</div>
</div>
<div class="col-md-4 col-12">
<div class="center-column">
<!-- Center column content -->
<?php echo get_theme_mod('center_column_text', 'Center Column Default Text'); ?>
</div>
</div>
<div class="col-md-4 col-12">
<div class="right-column">
<!-- Right column content -->
<?php echo get_theme_mod('right_column_text', 'Right Column Default Text'); ?>
<!-- Social Media Icons -->
<div class="social-icons">
<a href="<?php echo esc_url(get_theme_mod('facebook_link', '#')); ?>"><i class="<?php echo esc_attr($facebook_icon_class); ?>"></i></a>
<a href="<?php echo esc_url(get_theme_mod('twitter_link', '#')); ?>"><i class="<?php echo esc_attr($twitter_icon_class); ?>"></i></a>
<a href="<?php echo esc_url(get_theme_mod('instagram_link', '#')); ?>"><i class="<?php echo esc_attr($instagram_icon_class); ?>"></i></a>
<a href="<?php echo esc_url(get_theme_mod('linkedin_link', '#')); ?>"><i class="<?php echo esc_attr($linkedin_icon_class); ?>"></i></a>
</div>
<!-- End Social Media Icons -->
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<header>
<?php
$navbar_scheme = get_theme_mod( 'navbar_scheme', 'navbar-light bg-light' ); // Get custom meta-value.
$navbar_position = get_theme_mod( 'navbar_position', 'static' ); // Get custom meta-value.
$search_enabled = get_theme_mod( 'search_enabled', '1' ); // Get custom meta-value.
?>
<nav id="header" class="navbar navbar-expand-md <?php echo esc_attr( $navbar_scheme ); if ( isset( $navbar_position ) && 'fixed_top' === $navbar_position ) : echo ' fixed-top'; endif; if ( is_home() || is_front_page() ) : echo ' home'; endif; ?>">
<!-- Rest of your navigation code here -->
<div class="container">
<a class="navbar-brand" href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php
$header_logo = get_theme_mod( 'header_logo' ); // Get custom meta-value.
if ( ! empty( $header_logo ) ) :
?>
<img src="<?php echo esc_url( $header_logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
<?php
else :
echo esc_attr( get_bloginfo( 'name', 'display' ) );
endif;
?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'amin' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<?php
// Loading WordPress Custom Menu (theme_location).
wp_nav_menu(
array(
'menu_class' => 'navbar-nav ms-auto',
'container' => '',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
'theme_location' => 'main-menu',
)
);
if ( '1' === $search_enabled ) :
?>
<form class="search-form my-2 my-lg-0" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="text" name="s" class="form-control" placeholder="<?php esc_attr_e( 'Search', 'amin' ); ?>" title="<?php esc_attr_e( 'Search', 'amin' ); ?>" />
<button type="submit" name="submit" class="btn btn-outline-secondary"><?php esc_html_e( 'Search', 'amin' ); ?></button>
</div>
</form>
<?php
endif;
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /#header -->
</header>
<main id="main" class="container<?php if ( isset( $navbar_position ) && 'fixed_top' === $navbar_position ) : echo ' style="padding-top: 100px;"'; endif; ?>">
<?php
// If Single or Archive (Category, Tag, Author, or a Date-based page).
if ( is_single() || is_archive() ) :
?>
<div class="row">
<div class="col-md-8 col-sm-12">
<?php endif; ?>
and here is my css
.top-bar {
z-index: 9999;
background-color: red;
color: white;
position: relative;
margin-bottom: 20px;
}
Thanks
I have developed a customizer.php file that allows for an optional top bar with three columns to be added above the navbar. Additionally, I have integrated options for both a fixed and a static navbar through customizer.php. While the top bar functions correctly, it currently overlaps the navbar when the sticky option is enabled.