Custom header

Hi,
I appreciate this fabulous free wordpress theme a lot.
I’m trying to custom header of the child theme of my website tingle, but I don’t know how to do it.

I put this code for edit just for experiments, but I haven’t knowledge about php and wordpress:

<nav class="navbar navbar-default" role="navigation">
			<div class="container">

<!--search form-->
<?php get_search_form(); ?>
<!--//search form-->

		        <div class="navbar-header">
		            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
		                <span class="sr-only">Toggle navigation</span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		                <span class="icon-bar"></span>
		            </button>

<!--menu-->
<?php dazzling_header_menu(); ?>
<!--//menu-->

			<div id="logo">
					<a href="http://www.tingle.altervista.org/"><img src="http://tingle.altervista.org/img/logo.png" alt="Risorse per la scuola dell'Infanzia e Primaria" title="Risorse per la scuola dell'Infanzia e Primaria" width="990" height="132" border="0"></a>

		        </div>

		    </div>
		</nav><!-- .site-navigation -->

So I would like to make the header region in this way:

Image and video hosting by TinyPic

Thanks for the support.
Regards

What I can see is that you are not using Child Theme and you have made all changes directly in parent theme, so all your changes will be reverted when a new update for this theme will be available.

Other thing is that search form is not possible to be added in header while keeping it mobile friendly. The best bet for you is to add this code to Theme Options - Other - Custom CSS.

form.form-search {
    float: right;
    width: 200px;
    margin-top: 15px;
}

.navbar-header {
    float: left;
    max-width: 80%;
}

You will have to play around with @media queries to make it mobile friendly but it is not going to be a easy task for sure.