WordPress.org

Forums

Customizr
[resolved] [closed] Adding a Search in the header? (35 posts)

  1. Dibyendu
    Member
    Posted 1 year ago #

    How do I add a search in the header right above the Tag line

  2. d4z_c0nf
    Member
    Posted 1 year ago #

    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

  3. Dibyendu
    Member
    Posted 1 year ago #

    I added the widget area and added search there. But it is not showing ... Not sure why :(

    website

  4. d4z_c0nf
    Member
    Posted 1 year ago #

    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);
  5. Dibyendu
    Member
    Posted 1 year ago #

    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. :)

  6. d4z_c0nf
    Member
    Posted 1 year ago #

    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.

  7. Dibyendu
    Member
    Posted 1 year ago #

    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?

  8. d4z_c0nf
    Member
    Posted 1 year ago #

    why do you say so? Looks like it works.

  9. Dibyendu
    Member
    Posted 1 year ago #

    I cleared my browser cache. Now its fine .. Absolutely Fantastic .. Just like I wanted. :)

    Thank you so much. You made my life easy. :D

    Thanks again.

  10. d4z_c0nf
    Member
    Posted 1 year ago #

    Glad to hear that.

  11. chappie
    Member
    Posted 1 year ago #

    @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?

  12. d4z_c0nf
    Member
    Posted 1 year ago #

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

  13. chappie
    Member
    Posted 1 year ago #

    @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.

  14. d4z_c0nf
    Member
    Posted 1 year ago #

    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 :D ). You have a disappearing problem when resizing the window, right?
    Let me try if I can reproduce it or not.

  15. d4z_c0nf
    Member
    Posted 1 year ago #

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

  16. chappie
    Member
    Posted 1 year ago #

    You've got it :-) Thanks for taking a look.

  17. chappie
    Member
    Posted 1 year ago #

    Yep:

    #searchform {
        max-width: 300px;
    position:relative; top:30px; right: -110%;
    }
    .searchform input[type="text"] {
        width: 50%;
    }
    .searchform label[class="screen-reader-text"] {
    display:none;
    }

    The "position:relative; right: -110%" is what I need to get the alignment how I want it in a 1267px wide viewport. But things go wrong quickly from there.

  18. chappie
    Member
    Posted 1 year ago #

    I'll try another if I may: how can I replace the "searchsubmit" (black rectangle containing the word 'Search') with a magnifying glass icon? Or is that a different topic?

  19. d4z_c0nf
    Member
    Posted 1 year ago #

    I'm trying something different to your issue, and about the serach submit, mind if the magnifying glass is not clickable? Just an icon..

  20. chappie
    Member
    Posted 1 year ago #

    Aesthetically I would be happy with a non-clickable icon but I don't think it will work as a UI since most visitors will not be too computer-savvy so won't automatically hit Return… So, on balance, I would have to stick with the clunky black rectangle (albeit, I can change its colour).

    BUT…I suppose I could populate the text field with something like "Enter search term and press Return" - so then we could go with an inert icon...

  21. d4z_c0nf
    Member
    Posted 1 year ago #

    Yep, but the bad thing is that I can make that button transparent, but cannot remove the border, don't know why.
    So you can use a background image for it with that magnifying glass.
    Anyway that's what you have to do to start (you have to do proper media queries for max-width: 769px, for example assigning to tc-header a margin-top of ... what you need), but you have to adapt it to your case.
    Let's start with your request about the searchinput.
    In your child theme create a file named: searchform.php:

    <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="" />
    </form>

    In the snippet above, for the widget area, change this with this:

    'before_widget' => '<div id="%1$s" class="widget %2$s">',

    with this:

    'before_widget' => '<div id="%1$s" class="widget %2$s container">',

    That way the widget area will follow the "behavior" and size of the carousel, which has the same class.
    Then replace this:
    add_action('__navbar', 'add_navbar_top_widget_area', 1);
    with this:
    add_action('__before_header', 'add_navbar_top_widget_area', 1);
    Ok, now we need some style, you clearly have to tune to fit your case.
    In your child theme style.css:

    #navbar-top {
    	width: 100%;
    	float: none;
    	margin-left: 0px;
    	position: absolute;
            /* to put it virtually inside the navbar-inner */
    	top: 60px;
            /* needed 'cause navbar-inner has z-index 200 */
    	 z-index: 210;
    }
    .navbar.notresp .row-fluid {
    	/* leave the space for our searchbox*/
    	margin-top: 60px;
    }
    #navbar-top #searchform {
        max-width: 300px;
    	float: right;
    }
    
    #navbar-top #searchform input[type="text"] {
    	/* if you use percentage here something breaks*/
        width: 200px;
    }

    Hope this helps, and sorry if I don't get your issue..

  22. chappie
    Member
    Posted 1 year ago #

    Wow! Thanks! That looks exciting!

    I need a few minutes to play with it as I'm old and slow...

  23. chappie
    Member
    Posted 1 year ago #

    Sorry for this question but I'm a php virgin.

    Do I have to put anything before your <form> code, like "<?php" ?

    And, just double-checking but I need a new file for this - I can't just add it to my existing functions.php child?

  24. d4z_c0nf
    Member
    Posted 1 year ago #

    Nope, you don't need that "<?php".

    And you mean always about the form?
    Is a template you must have in your child theme in order to override wordpress search form. And it must be called the way I told you :D
    http://codex.wordpress.org/Function_Reference/get_search_form

  25. chappie
    Member
    Posted 1 year ago #

    OK, getting there… What I now have is a search form positioned exactly where I want it and which moves in perfect harmony with the right edge of my slider. That's a truly wonderful thing and I am indebted to you.

    Not everything is good though. The top level of my navigation menu no longer works either on hover or mousedown (it is coded to be clickable and also to produce any dropdown menu on hover). If I wait long enough, I do eventually get a dropdown menu (where one exists) and it works fine - but the top level functionality is broken.

    When I inspected my top-level menu I got this:

    <div id="search-3" class="widget widget_search container"><form role="search" method="get" id="searchform" action="http://localhost:8888/sitename/">
        <input type="text" value="" name="s" id="s">
        <input type="submit" id="searchsubmit" value="">
    </form></div>

    Does this mean that my menu is now part of a new hierarchy? Anyway, it doesn't seem to like it.

    I also still have a (smaller) black rectangle to the right of the search text field. It is interactive so behaves the same way as the original "searchsubmit" rectangle. Can I put a background image in here? (Not that I know how of course…)

  26. d4z_c0nf
    Member
    Posted 1 year ago #

    Well.
    Probably the thing is that you have to set a higher margin top for the navbar.notresp .row-fluid . Looks like the div we put overlaps the menu.
    That rectangle is, as you said, the submit button. And you can set a background image for it. But.. it's late here, and I have to go to sleep. We'll think about that tomorrow ok?
    Please open a new topic so we can do all that there :).
    Goodnight.

  27. chappie
    Member
    Posted 1 year ago #

    That fixed it, d4z_c0nf. Thanks again for all your help. Sorry you have to sleep - it's only midnight here. The night is young. But I'll be back for more tomorrow unless you need a longer break.

  28. rdellconsulting
    Member
    Posted 1 year ago #

    @d4z doesn't sleep, he closes his eyes and absorbs even more Czr solutions for the next day. Only mere mortals like me sleep ;)

  29. yavarkhan
    Member
    Posted 1 year ago #

    d4z_c0nf,
    thx for ur help and the code but i have one problem

    .widget_search the magnifier is on the left and the search box and the form is on the right of the page

    http://tinypic.com/m/i2t4w4/1

  30. d4z_c0nf
    Member
    Posted 1 year ago #

    yavarkhan would be good to see your site :D
    What code did you use? The one I gave to Dibyendu?
    The one I gave to chappie?
    Probably you made a mix..?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.