WordPress.org

Forums

Customizr
search bar In the Navbar with sticky navbar (14 posts)

  1. Sky . Design
    Member
    Posted 1 year ago #

    Hey everyone, this is kind of a continuation of this thread:

    http://wordpress.org/support/topic/how-to-add-the-wp-search-bar-in-the-navbar?replies=26#post-5453141

    But specifically with a navbar that is sticky to the top. Would really like a search bar where the tagline is, haven't got it to work so far, so any input is very welcome.

    My site: http://www.sky-design.nl

  2. d4z_c0nf
    Member
    Posted 1 year ago #

    You can do something of the sort in your child theme functions.php

    add_filter('tc_tagline_display', 'display_search_box');
    function display_search_box($html){
        global $wp_current_filter;
        $search_box = get_search_form(false); //don't echo it
            if ( in_array('__navbar', $wp_current_filter) )
                // replace tagline in portrait viewport
                return '<div class="span7 search-navbar">'.$search_box.'</div>';
            else
                // append searchbox to the tagline in mobile viewport
                return str_replace('</div>', $search_box . '</div>', $html);
    }

    Adding this to your child theme style.css in order to hide the search-box of the navbar in mobile.

    @media (max-width: 979px){
    	.navbar-inner .search-navbar {
    		display: none;
    	}
    }

    Well of course now that you know how to do it you can mod it the way you want.

  3. Sky . Design
    Member
    Posted 1 year ago #

    Thanks d4z_c0nf, will try it now and let you know :) doing the last few tweaks to my site, woudl you mind taking a look at my post

    http://wordpress.org/support/topic/customizr-linking-multiple-slider-images-to-pages?replies=1

    Once that one is fixed I'm basically done! YAY!

  4. Sky . Design
    Member
    Posted 1 year ago #

    Allright she works! You are awesome for helping me out.

    I've styled it a bit (float right and changed up the length) but it now vertically pushes the social buttons and menu up and down respectively. Cant figure out how to get it to sit on the same height as the social buttons. Thoughts?

  5. d4z_c0nf
    Member
    Posted 1 year ago #

    Doesn't push socials up, it's just that it (the search box) has that label "Zoeken naar:", and a tedious margin bottom (which instead pushes the menu down). So to get rid of it:

    .search-navbar #searchform{
    margin-bottom: 0px;
    }

    And so on..
    About socials you have to chose, or remove the search label or apply to the social block a margin top.
    But this is just css and I see you can use it, so.. do it :D

  6. Sky . Design
    Member
    Posted 1 year ago #

    :) I've actually learned all I know about CSS and PHP while building this site over the last two weeks. Harldy an expert but I guess I'm a fast learner. Often don't know how to reach the parts I want to style (in this case I was looking for that .seacrh-navbar #searchform). This helped me again, will mess around with it a bit and hopefully get what I want. You rule.

  7. d4z_c0nf
    Member
    Posted 1 year ago #

    :)
    So you're learning fast.. anyway, this will help:
    http://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

  8. Sky . Design
    Member
    Posted 1 year ago #

    Thanks that seems useful! I'm in chrome so that would be Developer Tools for me. It will help me find the rule that controls the search button ;)

  9. d4z_c0nf
    Member
    Posted 1 year ago #

    Yes, us dev tools of chrome, I use that.. :D
    So this topic is solved?

  10. Sky . Design
    Member
    Posted 1 year ago #

    :) here is where my inexperience starts to hurt a bit. I tried:

    .search-navbar #screen-reader-text{
    max-height: 0px;
    }
    .search-navbar #searchsubmit{
    float: top;
    }

    To eliminate the text and allign the button with the searchbar. Guess not ;)

  11. d4z_c0nf
    Member
    Posted 1 year ago #

    eliminate the text:

    .search-navbar .screen-reader-text {
        display: none;
    }

    use, . for classes and # for ids.
    float: top, I think doesn't exists :D

    .search-navbar #searchsubmit{
    margin-top: -10px; /*or so*/
    }

    Probably you need to move the whole searchbox below so:

    .search-navbar {
    margin-top: 6px; /*or so*/
    }
  12. Sky . Design
    Member
    Posted 1 year ago #

    Thanks again man, managed to figure the

    .search-navbar .screen-reader-text {
        display: none;
    }

    and was quite proud :P One issue that popped up now (I really hope this is the last one, you've been insanly helpful) is that the menu now floats right, if I decrease the width of the screen it jumps back to normal after about say 200px. Pretty sure it's the social block's padding.

  13. Sky . Design
    Member
    Posted 1 year ago #

    Fixed it :) Website framework all done, just adding some content today and that should be all, YAY!

    If you'd be anywhere near where I live right now I would buy you tons of beers.

  14. d4z_c0nf
    Member
    Posted 1 year ago #

    Ahaha, glad you fixed it on your own :D
    Thank you man!
    :D

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.