Header navbar is covering the notification bar(over it) and any banner below it

Question

I am using wordpress for my website Zumpak.com I am trying to put a notification bar over the header menu to relay messages to the visitors. I put:

    <div id="dabar" class="hide_on_mobile">Your website message.</div>

just below the closing head. But the navbar is obscuring it and hence it is not visible. I tried playing with the css code and trying various combinations for 'position' and 'z-index' properties, but to no avail.

Similarly when I try to put a banner image below my navbar, the navbar is overcoming that too. I am using:

    <div class="headerbanner"><a href="BANNERLINK" target="_blank"><img src="LINKTOIMAGE" width="200" height="50" /></a></div>

just after

   <body <?php body_class(); ?>>

I would prefer the header to be fixed as it is currently(moves as the page is scrolled) - but it should give space to accommodate the notification bar above it and the banner below it and not hide them.

Thanks in Advance.

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Asons, Nov 04 '16 at 19:07
and also dont find
Your website message.
this in your html part @ https://zumpak.com/en/ — Baezid Mostafa, Nov 04 '16 at 19:31
@MostafaBaezid I am trying it on my localhost and its still not live. How can I replicate it for you to have a look? — Saurabh Jindal, Nov 04 '16 at 20:38
@SaurabhJindal See the answer. Maybe This will help you. Good luck. — Baezid Mostafa, Nov 04 '16 at 22:24
@MostafaBaezid- Thanks for the answer. It helped me and I was able to get the banner below the navbar. How did you get the notification bar over the navbar ( the one with the "Your Website Message" text)? Thanks again. You have been extremely helpful. — Saurabh Jindal, Nov 05 '16 at 01:04
@MostafaBaezid - I see that the top notification bar is there but is being covered by the navbar. How can it be made to come over the navbar, as displayed in your image? — Saurabh Jindal, Nov 05 '16 at 13:43
Where you seen navbar cover the notification bar. I added two img one is mobile view and other one is dextop or laptop view. In your html dabar id has a class hide_on_mobile so i use css to hide the dabar at mobile screen. — Baezid Mostafa, Nov 05 '16 at 16:30
The notification bar appears over the navbar while the page loads, and then the header navbar over comes and hides it. I can see it in the view source or when I inspect it with firebug. I would want it to be displayed permanently( as seen in your image). Thanks. — Saurabh Jindal, Nov 05 '16 at 18:14

score 0 · Answer 1 · answered Nov 04 '16 at 22:23

You are using shop-isle theme I used this theme before. So first you need to go local folder " wp-content > themes > shop-isle > inc > structure > header.php "

In header.php find where Navigation start. replace or paste this if you have similar with my code. See the comment out section in html.

    <!-- Navigation start -->
    <nav class="navbar navbar-custom navbar-transparent navbar-fixed-top" role="navigation">

Your website message.

                <div class="navbar-header">
                    <?php

                        $shop_isle_logo = get_theme_mod('shop_isle_logo');
                        echo '<div class="shop_isle_header_title"><div class="shop-isle-header-title-inner">';
                        if( !empty($shop_isle_logo) ):
                            echo '<a href="'.esc_url( home_url( '/' ) ).'" class="logo-image"><img src="'.esc_url( $shop_isle_logo ).'"></a>';
                            if( is_customize_preview() ):
                                echo '<h1 class="site-title shop_isle_hidden_if_not_customizer""><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a></h1>';
                                echo '<h2 class="site-description shop_isle_hidden_if_not_customizer"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'description' ).'</a></h2>';
                            endif;
                        else:
                            if( is_customize_preview() ):
                                echo '
                                        <a href="'.esc_url( home_url( '/' ) ).'" class="logo-image shop_isle_hidden_if_not_customizer">
                                            <img src="">
                                        </a>
                                    ';
                            endif;                          
                            echo '<h1 class="site-title"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a></h1>';
                            echo '<h2 class="site-description"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'description' ).'</a></h2>';
                        endif;
                        echo '</div></div>';
                    ?>

                    <div type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
                        <span class="sr-only"><?php _e('Toggle navigation','shop-isle'); ?></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </div>
                </div>

                <div class="header-menu-wrap">
                    <div class="collapse navbar-collapse" id="custom-collapse">

                        <?php wp_nav_menu( array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'nav navbar-nav navbar-right') ); ?>

                    </div>
                </div>

                <?php if( class_exists( 'WooCommerce' ) ): ?>
                    <div class="navbar-cart">

                        <div class="header-search">
                            <div class="glyphicon glyphicon-search header-search-button"></div>
                            <div class="header-search-input">
                                <form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
                                    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'shop-isle' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'shop-isle' ); ?>" />
                                    <input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'shop-isle' ); ?>" />
                                    <input type="hidden" name="post_type" value="product" />
                                </form>
                            </div>
                        </div>

                        <?php if( function_exists( 'WC' ) ): ?>
                            <div class="navbar-cart-inner">
                                <a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart','shop-isle' ); ?>" class="cart-contents">
                                    <span class="icon-basket"></span>
                                    <span class="cart-item-number"><?php echo esc_html( trim( WC()->cart->get_cart_contents_count() ) ); ?></span>
                                </a>
                            </div>
                        <?php endif; ?>

                    </div>
                <?php endif; ?>

            </div>
        </div>

    </nav>    
  <div class="headerbanner"><!-- YOUR HEADER Banner div start-->
  <a href="#">
  <img class="img-header" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTuHUWTj_eul7PK7PmPTmDjb01yDSIZyuBHkxZwJq9bm1XV5vg" alt="Img-alt-txt" /> 
</a>
    </div><!-- YOUR HEADER Banner div end-->

    <!-- Navigation end -->

Now On your custom.css or in your style.css add your styling here is mine

div#dabar {
background: red;
height: 20px;
color: white;
font-weight: bold;
text-align: center;
display:block;
}
div.headerbanner a > img.img-header{
width:100%;
height:auto;
margin:0 auto;
display:block;
}
@media only screen and (max-width: 475px) {
    div#dabar {
        display:none; /*Hide iN mobile*/
    }
}

Header navbar is covering the notification bar(over it) and any banner below it

1 Answers1