search bar In the Navbar with sticky navbar

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.

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

https://www.ads-software.com/support/topic/customizr-linking-multiple-slider-images-to-pages?replies=1

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

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?

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

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

??
So you’re learning fast.. anyway, this will help:
https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

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

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

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

eliminate the text:

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

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

.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*/
}

Thanks again man, managed to figure the

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

and was quite proud ?? 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.

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.

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