WordPress.org

Support

Support » Themes and Templates » [Resolved] Adding a Search in the header?

[Resolved] Adding a Search in the header?

Viewing 15 replies - 1 through 15 (of 34 total)
  • d4z_c0nf
    Participant

    @d4z_c0nf

    Why don’t put a widget area above social+tagline+menu? You might want to add other widgets there..
    If you like this idea that’s what you have to do:
    In your child theme functions.php:

    /*Create a new widget area*/
    if (function_exists('register_sidebar')) {
        register_sidebar(array(
        'name' => 'Navbar Top Widget Area',
        'id' => 'extra-navbar-top-widget-area',
        'description' => 'A widget area above social block and tagline in header',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>'
        ));
    }
    /* Add the new widget area into navbar-inner before social-block*/
    function add_navbar_top_widget_area(){
        if ( function_exists('dynamic_sidebar') ){
            ob_start();
            ?>
            <div id="navbar-top" class="widget-area span12">
                <?php dynamic_sidebar('Navbar Top Widget Area'); ?>
            </div>
            <?php
            $html = ob_get_contents();
            ob_end_clean();
            echo $html;
        }
    }

    Now you can add the search widget to this area and of course you have to style it in your child theme style.css .
    Note that now social-block, is not the first child of the row anymore, so you have to set its left margin to 0px, this way:

    .navbar-inner .social-block {
        margin-left: 0px;
    }

    Hope this helps

    Dibyendu
    Member

    @whereangelsfeartotrade

    I added the widget area and added search there. But it is not showing … Not sure why πŸ™

    website

    d4z_c0nf
    Participant

    @d4z_c0nf

    Ops, I missed an important part, sorry, copy&paste error.
    Before this: function add_navbar_top_widget_area(){
    add this:

    add_action('__navbar', 'add_navbar_top_widget_area', 1);

    Dibyendu
    Member

    @whereangelsfeartotrade

    Kool! it is added now.

    I need one more help with this. πŸ™‚

    The search is too big … and taking a lot of space
    Can I adjust the space utilization of the search or can I add any other attribute to it so that it takes a very little space in the header.

    How about making it small in or hidden behind a search icon and coming out when someone hover on the search icon.

    But how to do that? Can you help me on that respect?
    Anyways .. your help is much appreciated. πŸ™‚

    d4z_c0nf
    Participant

    @d4z_c0nf

    You can start with this to hide the form and display it on hover:

    /* don't display the label "Search" */
    #navbar-top .screen-reader-text{
        display: none;
    }
    /* Hide the form */
    #navbar-top .searchform{
        display: none;
    }
    /* Use the magnifying glass as icon*/
    #navbar-top .widget_search:before{
        content: "\f400";
        font-family: "genericons";
    }
    /* When hover over the div widget_search display the form*/
    #navbar-top .widget_search:hover .searchform{
        display:block;
    }

    And of ‘course you can style your form and the widget the way you want just like you did with everything else.

    Dibyendu
    Member

    @whereangelsfeartotrade

    Thats Good to know! I have added this code to my child CSS but it doesnt work… no changes to my webpage. What should I do?

    d4z_c0nf
    Participant

    @d4z_c0nf

    why do you say so? Looks like it works.

    Dibyendu
    Member

    @whereangelsfeartotrade

    I cleared my browser cache. Now its fine .. Absolutely Fantastic .. Just like I wanted. πŸ™‚

    Thank you so much. You made my life easy. πŸ˜€

    Thanks again.

    d4z_c0nf
    Participant

    @d4z_c0nf

    Glad to hear that.

    @d4z_c0nf – thank you for this snippet. It gives me the Search tool at the top of the page but defaults to a left-of-centre position when viewed on a desktop PC. I can re-position it to where I would like it to show, ie top-right, aligned with the right edge of my framed slider – but no variation of absolute or relative positioning will keep it there if I make a tiny adjustment to the viewport size: the Search tool just disappears off the right edge of the window – and eventually reappears along with the 3-bar menu if I carry on reducing the viewport width.

    Is there a way to keep it aligned with the right edge of the slider in all viewports?

    d4z_c0nf
    Participant

    @d4z_c0nf

    chappie, don’t know if I really understand :D, sorry.
    can you give me a link to your site?

    @d4z_c0nf – can’t blame you for that since I don’t know what I’m talking about…and I can still talk nonsense even when I do know what I’m talking about.

    In a nutshell, I want to align the right edge of my searchform with the right edge of my slider – and keep them aligned that way in all viewport sizes… although I should probably use @media to centre the searchform when the 3-bar menu appears as the space above the slider disappears.

    At the moment, I can align the searchform how I want it in any wide viewport but as soon as I start to narrow my browser window, the searchform temporarily disappears offstage-right – and that happens whether I use absolute or relative positioning for it.

    I can’t link to my site as it isn’t online yet. Best I could do is email a Safari webarchive file to you to play with – but AFAIK that file will only open in Mac Safari.

    d4z_c0nf
    Participant

    @d4z_c0nf

    Sorry don’t have a mac.
    So let me understand the issue, you use my snippet above to place the search above the navbar. You want it aligned to the right top of the slider, which I presume, is in non full width mode (eheh easy assumption πŸ˜€ ). You have a disappearing problem when resizing the window, right?
    Let me try if I can reproduce it or not.

    d4z_c0nf
    Participant

    @d4z_c0nf

    Can you give me the css rules you applied to that search box ? thanks

    You’ve got it πŸ™‚ Thanks for taking a look.

Viewing 15 replies - 1 through 15 (of 34 total)
  • The topic ‘[Resolved] Adding a Search in the header?’ is closed to new replies.