Header

Default

<header class="header mb-0">
        <div class="header_header">
                <div class="container">

                        <ul class="nav justify-content-end">

                                <li class="nav-item ">
                                        <a class="nav-link " href="">
			<svg viewBox="0 0 32 32">
				<use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#align-left"></use>
			</svg>
		Blog
	</a>
                                </li>

                                <li class="nav-item ">
                                        <a class="nav-link " href="">
			<svg viewBox="0 0 32 32">
				<use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
			</svg>
		Login
	</a>
                                </li>

                        </ul>
                </div>
        </div>
        <div class="header_body">
                <nav class="navbar navbar-toggleable-md navbar-default">
                        <div class="container">

                                <button class="navbar-toggler collapsed navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">

                                        <svg class="icon " viewBox="0 0 32 32">
                                                <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#bars"></use>
                                        </svg>
                                </button>
                                <a class="navbar-brand" href="/demos/homepage.html">

<div class="logo class">
    <svg viewBox="0 0 800 176" xmlns="http://www.w3.org/2000/svg"><g><rect fill="none" height="178" width="802" y="-1" x="-1"></rect> </g> <g><g stroke="null"> <g stroke="null" id="svg_g_1" fill="#afb3b6"><path stroke="null" d="m97.577538,14.302924l21.446813,36.977264a29.740285,29.740285 0 1 0 -45.851807,0l21.446813,-36.977264a1.58474,1.58474 0 0 1 2.958181,0z"></path><path stroke="null" d="m15.223889,151.80552l21.446813,-36.977264a29.68746,29.68746 0 1 0 22.925904,39.671322l-42.893626,0a1.58474,1.58474 0 0 1 -1.479091,-2.694058z"></path><path stroke="null" d="m160.438886,114.247185a29.68746,29.68746 0 0 0 -4.912694,0.422597l21.446813,36.977264a1.58474,1.58474 0 0 1 -1.479091,2.535584l-42.893626,0a29.68746,29.68746 0 1 0 27.838597,-39.935445z"></path></g> <g stroke="null" id="svg_g_2" fill="#004db9"><polygon stroke="null" points="28.799880266189575,141.55763244628906 92.50633931159973,104.7387924194336 92.50633931159973,31.20684814453125 28.799880266189575,141.55763244628906 "></polygon><polygon stroke="null" points="32.44470143318176,147.79092407226562 159.80498433113098,147.79092407226562 96.09852528572083,111.02486419677734 32.44470143318176,147.79092407226562 "></polygon><polygon stroke="null" points="163.4497902393341,141.55763244628906 99.74333882331848,31.20684814453125 99.74333882331848,104.7387924194336 163.4497902393341,141.55763244628906 "></polygon></g> <g stroke="null" id="svg_g_3" fill="#000"><path stroke="null" d="m247.712071,36.511571l0,116.351532l-15.740595,0l0,-116.351532l-21.953988,0l0,-14.129715l59.46447,0l0,14.129715l-21.769887,0z"></path><path stroke="null" d="m330.971533,152.771053l-17.949801,-56.05861l-14.267791,0l0,56.05861l-15.648545,0l0,-130.481247l29.456084,0c19.744781,0 30.744788,8.6067 30.744788,37.188306c0,18.133902 -4.602513,28.765707 -15.740595,34.058597l19.928882,59.188319l-16.523022,0l0,0.046025zm-18.410052,-116.259481l-13.807539,0l0,46.025131l13.807539,0c12.10461,0 14.820092,-9.205026 14.820092,-23.288716s-2.577407,-22.736415 -14.820092,-22.736415z"></path><path stroke="null" d="m368.574066,152.771053l0,-130.481247l15.740595,0l0,130.481247l-15.740595,0z"></path><path stroke="null" d="m462.833534,152.771053l-33.690396,-89.242729l0,89.242729l-15.740595,0l0,-130.481247l14.635992,0l33.506296,89.242729l0,-89.242729l15.740595,0l0,130.481247l-14.267791,0l-0.184101,0z"></path><path stroke="null" d="m552.260364,152.771053l-6.213393,-30.790813l-30.192486,0l-6.213393,30.790813l-16.476997,0l30.376587,-130.481247l15.188293,0l30.192486,130.481247l-16.661098,0zm-21.217585,-104.983324l-12.28871,60.062796l24.347294,0l-12.058584,-60.062796z"></path><path stroke="null" d="m651.168371,152.771053l0,-92.92474l-20.665284,61.029324l-9.573227,0l-20.297083,-59.55652l0,91.451936l-15.740595,0l0,-130.481247l14.820092,0l26.3724,72.581632l26.142275,-72.581632l14.728042,0l0,130.481247l-15.740595,0l-0.046025,0z"></path><path stroke="null" d="m695.996849,152.771053l0,-130.481247l15.740595,0l0,130.481247l-15.740595,0z"></path><path stroke="null" d="m787.034559,146.971886a27.615079,27.615079 0 0 1 -20.112982,7.133895a28.259431,28.259431 0 0 1 -22.322189,-9.205026c-8.974901,-9.895403 -9.527202,-24.715495 -9.527202,-57.347313s0.552302,-47.45191 9.527202,-57.347313a31.48119,31.48119 0 0 1 42.987473,-1.656905a36.820105,36.820105 0 0 1 9.205026,26.004199l-15.740595,0a24.48537,24.48537 0 0 0 -4.050212,-15.004193a12.10461,12.10461 0 0 0 -10.217579,-4.602513a12.38076,12.38076 0 0 0 -10.631805,4.970714c-4.602513,6.213393 -5.476991,16.661098 -5.476991,47.636011s0.920503,41.422618 5.476991,47.636011a12.38076,12.38076 0 0 0 10.631805,4.970714a12.242685,12.242685 0 0 0 10.217579,-4.602513a23.979093,23.979093 0 0 0 4.234312,-14.820092l15.740595,0a36.451904,36.451904 0 0 1 -9.941428,26.234325z"></path></g> </g> </g> </svg>
</div>
		</a>
                                <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">

                                        <ul class="nav navbar-nav mx-lg-2 mx-xl-6">
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Products</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">ICs</a>
                                                                <a class="dropdown-item" href="#">Modules</a>
                                                                <a class="dropdown-item" href="#">Drives</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Solutions</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Manifacturing</a>
                                                                <a class="dropdown-item" href="#">Medical</a>
                                                                <a class="dropdown-item" href="#">Laboratory</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Technology</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Architecture</a>
                                                                <a class="dropdown-item" href="#">Std. Technologies</a>
                                                                <a class="dropdown-item" href="#">Adv. Technologies</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Support</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Help Center</a>
                                                                <a class="dropdown-item" href="#">Software</a>
                                                                <a class="dropdown-item" href="#">Eval Kits</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Company</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Careers</a>
                                                                <a class="dropdown-item" href="#">Locations</a>
                                                                <a class="dropdown-item" href="#">Quality</a>
                                                                <a class="dropdown-item" href="#">News</a>
                                                                <a class="dropdown-item" href="#">Events</a>
                                                        </div>
                                                </li>
                                        </ul>
                                        <form class="navbar-form" action="/search/">

                                                <div class="input-group input-group--type-a input-group--type-b mr-1">

                                                        <input class="form-text form-control " type="search" value="" id="form-id" name="q" placeholder="Search">
                                                        <div class="input-group-addon">

                                                                <svg class="icon " viewBox="0 0 32 32">
                                                                        <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#search"></use>
                                                                </svg>
                                                        </div>
                                                </div>

                                                <a href="#" class="btn btn-secondary btn-sm btn--icon-right">
    <span>Buy here</span>
        
<svg class="icon " viewBox="0 0 32 32">
	<use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#triangle"></use>
</svg>

     </a>
                                        </form>
                                </div>
                        </div>
                </nav>
        </div>
</header>
			  

Type A

.header--type-a

<header class="header header--type-a typemb-0">
        <div class="header_header">
                <div class="container">

                        <ul class="nav justify-content-end">

                                <li class="nav-item ">
                                        <a class="nav-link " href="">
			<svg viewBox="0 0 32 32">
				<use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#align-left"></use>
			</svg>
		Blog
	</a>
                                </li>

                                <li class="nav-item ">
                                        <a class="nav-link " href="">
			<svg viewBox="0 0 32 32">
				<use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#home"></use>
			</svg>
		Login
	</a>
                                </li>

                        </ul>
                </div>
        </div>
        <div class="header_body">
                <nav class="navbar navbar-toggleable-md navbar-default">
                        <div class="container">

                                <button class="navbar-toggler collapsed navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">

                                        <svg class="icon " viewBox="0 0 32 32">
                                                <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#bars"></use>
                                        </svg>
                                </button>
                                <a class="navbar-brand" href="/demos/homepage.html">

<div class="logo class">
    <svg viewBox="0 0 800 176" xmlns="http://www.w3.org/2000/svg"><g><rect fill="none" height="178" width="802" y="-1" x="-1"></rect> </g> <g><g stroke="null"> <g stroke="null" id="svg_g_1" fill="#afb3b6"><path stroke="null" d="m97.577538,14.302924l21.446813,36.977264a29.740285,29.740285 0 1 0 -45.851807,0l21.446813,-36.977264a1.58474,1.58474 0 0 1 2.958181,0z"></path><path stroke="null" d="m15.223889,151.80552l21.446813,-36.977264a29.68746,29.68746 0 1 0 22.925904,39.671322l-42.893626,0a1.58474,1.58474 0 0 1 -1.479091,-2.694058z"></path><path stroke="null" d="m160.438886,114.247185a29.68746,29.68746 0 0 0 -4.912694,0.422597l21.446813,36.977264a1.58474,1.58474 0 0 1 -1.479091,2.535584l-42.893626,0a29.68746,29.68746 0 1 0 27.838597,-39.935445z"></path></g> <g stroke="null" id="svg_g_2" fill="#004db9"><polygon stroke="null" points="28.799880266189575,141.55763244628906 92.50633931159973,104.7387924194336 92.50633931159973,31.20684814453125 28.799880266189575,141.55763244628906 "></polygon><polygon stroke="null" points="32.44470143318176,147.79092407226562 159.80498433113098,147.79092407226562 96.09852528572083,111.02486419677734 32.44470143318176,147.79092407226562 "></polygon><polygon stroke="null" points="163.4497902393341,141.55763244628906 99.74333882331848,31.20684814453125 99.74333882331848,104.7387924194336 163.4497902393341,141.55763244628906 "></polygon></g> <g stroke="null" id="svg_g_3" fill="#000"><path stroke="null" d="m247.712071,36.511571l0,116.351532l-15.740595,0l0,-116.351532l-21.953988,0l0,-14.129715l59.46447,0l0,14.129715l-21.769887,0z"></path><path stroke="null" d="m330.971533,152.771053l-17.949801,-56.05861l-14.267791,0l0,56.05861l-15.648545,0l0,-130.481247l29.456084,0c19.744781,0 30.744788,8.6067 30.744788,37.188306c0,18.133902 -4.602513,28.765707 -15.740595,34.058597l19.928882,59.188319l-16.523022,0l0,0.046025zm-18.410052,-116.259481l-13.807539,0l0,46.025131l13.807539,0c12.10461,0 14.820092,-9.205026 14.820092,-23.288716s-2.577407,-22.736415 -14.820092,-22.736415z"></path><path stroke="null" d="m368.574066,152.771053l0,-130.481247l15.740595,0l0,130.481247l-15.740595,0z"></path><path stroke="null" d="m462.833534,152.771053l-33.690396,-89.242729l0,89.242729l-15.740595,0l0,-130.481247l14.635992,0l33.506296,89.242729l0,-89.242729l15.740595,0l0,130.481247l-14.267791,0l-0.184101,0z"></path><path stroke="null" d="m552.260364,152.771053l-6.213393,-30.790813l-30.192486,0l-6.213393,30.790813l-16.476997,0l30.376587,-130.481247l15.188293,0l30.192486,130.481247l-16.661098,0zm-21.217585,-104.983324l-12.28871,60.062796l24.347294,0l-12.058584,-60.062796z"></path><path stroke="null" d="m651.168371,152.771053l0,-92.92474l-20.665284,61.029324l-9.573227,0l-20.297083,-59.55652l0,91.451936l-15.740595,0l0,-130.481247l14.820092,0l26.3724,72.581632l26.142275,-72.581632l14.728042,0l0,130.481247l-15.740595,0l-0.046025,0z"></path><path stroke="null" d="m695.996849,152.771053l0,-130.481247l15.740595,0l0,130.481247l-15.740595,0z"></path><path stroke="null" d="m787.034559,146.971886a27.615079,27.615079 0 0 1 -20.112982,7.133895a28.259431,28.259431 0 0 1 -22.322189,-9.205026c-8.974901,-9.895403 -9.527202,-24.715495 -9.527202,-57.347313s0.552302,-47.45191 9.527202,-57.347313a31.48119,31.48119 0 0 1 42.987473,-1.656905a36.820105,36.820105 0 0 1 9.205026,26.004199l-15.740595,0a24.48537,24.48537 0 0 0 -4.050212,-15.004193a12.10461,12.10461 0 0 0 -10.217579,-4.602513a12.38076,12.38076 0 0 0 -10.631805,4.970714c-4.602513,6.213393 -5.476991,16.661098 -5.476991,47.636011s0.920503,41.422618 5.476991,47.636011a12.38076,12.38076 0 0 0 10.631805,4.970714a12.242685,12.242685 0 0 0 10.217579,-4.602513a23.979093,23.979093 0 0 0 4.234312,-14.820092l15.740595,0a36.451904,36.451904 0 0 1 -9.941428,26.234325z"></path></g> </g> </g> </svg>
</div>
		</a>
                                <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">

                                        <ul class="nav navbar-nav mx-lg-2 mx-xl-6">
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Products</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">ICs</a>
                                                                <a class="dropdown-item" href="#">Modules</a>
                                                                <a class="dropdown-item" href="#">Drives</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Solutions</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Manifacturing</a>
                                                                <a class="dropdown-item" href="#">Medical</a>
                                                                <a class="dropdown-item" href="#">Laboratory</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Technology</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Architecture</a>
                                                                <a class="dropdown-item" href="#">Std. Technologies</a>
                                                                <a class="dropdown-item" href="#">Adv. Technologies</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Support</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Help Center</a>
                                                                <a class="dropdown-item" href="#">Software</a>
                                                                <a class="dropdown-item" href="#">Eval Kits</a>
                                                        </div>
                                                </li>
                                                <li class="nav-item dropdown">
                                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Company</a>
                                                        <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="#">Careers</a>
                                                                <a class="dropdown-item" href="#">Locations</a>
                                                                <a class="dropdown-item" href="#">Quality</a>
                                                                <a class="dropdown-item" href="#">News</a>
                                                                <a class="dropdown-item" href="#">Events</a>
                                                        </div>
                                                </li>
                                        </ul>
                                        <form class="navbar-form" action="/search/">

                                                <div class="input-group input-group--type-a input-group--type-b mr-1">

                                                        <input class="form-text form-control " type="search" value="" id="form-id" name="q" placeholder="Search">
                                                        <div class="input-group-addon">

                                                                <svg class="icon " viewBox="0 0 32 32">
                                                                        <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#search"></use>
                                                                </svg>
                                                        </div>
                                                </div>

                                                <a href="#" class="btn btn-secondary btn-sm btn--icon-right">
    <span>Buy here</span>
        
<svg class="icon " viewBox="0 0 32 32">
	<use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#triangle"></use>
</svg>

     </a>
                                        </form>
                                </div>
                        </div>
                </nav>
        </div>
</header>