Ecommerce Shopify WordPress Discussion

Top Bar bootstrap WP

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. text
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.