Add a sidebar above the header

I wanna add a sidebar above the header on my site. It is a theme from a Themeforest.
I want instructions step by step on how to add this sidebar above the header.

  • Kris Tomczyk

    Hi Khawar,

    Hope you are doing good today.

    To add a sidebar above the header on your site please follow this steps:

    1. add this code to you functions.php

    register_sidebar( array(
                'name'          => esc_attr__( 'TOP SIDEBAR', 'kutetheme'),
                'id'            => 'top-sidebar',
                'description'   => esc_attr__( 'The top sidebar', 'kutetheme'),
                'before_widget' => '<div id="%1$s" class="widget-container">',
                'after_widget'  => '</div>',
                'before_title'  => '<h3 class="widget-title">',
                'after_title'   => '</h3>',
            ) );

    right here

    2. add this code to your header.php file:

    <div id="mycustomsidebar">
    		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("TOP SIDEBAR") ) : ?>
    		<?php endif; ?>
    		</div>

    right here

    3. Install https://pl.wordpress.org/plugins/custom-post-widget/ this plugin to have move text options in your sidebar

    4. add this CSS code to your site using some Custom CSS plugin:

    #mycustomsidebar {margin:0 auto; width:1170px; overflow:hidden; padding:5px 0; border-bottom:1px solid #eee;}
    #mycustomsidebar .widget-container {float:left; width:33%;}
    
    @media screen and ( max-width: 1200px ) {
    #mycustomsidebar {width:970px;}
    }
    
    @media screen and ( max-width: 992px ) {
    #mycustomsidebar {width:750px;}
    }
    
    @media screen and ( max-width: 780px ) {
    #mycustomsidebar {width:auto; display:block; padding:5px;}
    #mycustomsidebar .widget-container {float:none; display:block; width:auto;  overflow:hidden; padding:5px;}
    }

    I divided your sidebar to 3 columns. You can choose how many columns you want to have:
    2, 3 or 4. You can edit this part of code:
    #mycustomsidebar .widget-container {float:left; width:33%;}

    2 columns:
    #mycustomsidebar .widget-container {float:left; width:50%;}

    3 columns:
    #mycustomsidebar .widget-container {float:left; width:33%;}

    4 columns:
    #mycustomsidebar .widget-container {float:left; width:25%;}

    5. Go to CONTENT BOCKS and add some custom block (just like in a page section)

    5. Go to APPERANCE -> WIDGET and add your CONTENT BOCKS to sidebar TOP SIDEBAR

    This is how this should look like:

    and it also responsive

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.