مشکل در سفارشی کردن navbar بوت استرپ

[پروگرامنویس]

درود
دوستان من از نوبار بوت استرپ برای منو و جعبه جستجوی تارنمام میخوام بهره ببرم.ولی می خوام یه سری چیزاش رو با کلاسهای خودم سفارشی کنم .3 تا مشکل دارم باهاش که نمی تونم درستش کنم

1-میخوام در اندازه کوچک مروگر آیکون ذره بین جعه جستجو کنار تکست باکس بمونه اما هنگامیکه مرورگر رو کوچیک میکنم این اتفاق نمی افته و دکمه جستجو پایین تکست باکس قرار می گیره!
2-برای اینکه در حالت موبایل منو بصورت یه آییکون سه خط دبیاد باید چیکار کنم؟
3-هرکاری میکن نمی تونم رنگ فونت زیر منوها رو تغییر بدم!
برگه نخست:


<!-- Menu -->
<div class="-wf-nav container-floud">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="box-mnu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="remo-file-pdf"></i>کتابخانه </a>
<ul class="dropdown-menu">
<li><a href="#">آیتم یک</a></li>
<li><a href="#">آیتم دو</a></li>
<li><a href="#">آیتم سه</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> دریافت نرم افزار </a>
<ul class="dropdown-menu">
<li><a href="#">آیتم یک</a></li>
<li><a href="#">آیتم دو</a></li>
<li><a href="#">آیتم سه</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> دریافت پروژه </a>
<ul class="dropdown-menu">
<li><a href="#">آیتم یک</a></li>
<li><a href="#">آیتم دو</a></li>
<li><a href="#">آیتم سه</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> آموزش و ترفند </a>
<ul class="dropdown-menu">
<li><a href="#">آیتم یک</a></li>
<li><a href="#">آیتم دو</a></li>
<li><a href="#">آیتم سه</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span> نودادها </a>
<ul class="dropdown-menu">
<li><a href="#">آیتم یک</a></li>
<li><a href="#">آیتم دو</a></li>
<li><a href="#">آیتم سه</a></li>
</ul>
</li>

</ul>
</div>
<div id="box-srch">
<form action="" class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<a href="#">
<i class="remo-search-outline"></i></a>
</form>
</div>
</div>
</div>
</div>
</div>


فایل سی اس اس:



.-wf-top ,.-wf-nav,.-wf-footer{
background: #0C67AA;
}
.dropdown a{
font-family: "yekan";
color:#c2d8f9;
}
.dropdown-menu a{
text-align: right;}

خواهشا راهنماییم کنید
یه پرسش دیگه هم داشتم
تو یه سری از نمونه های سی اس اس خارجی که دیدم یه سری خصوصیات استایل دهی هستش که من تاحلا تو هیچ آموزشی ندیدم میشه بگید اینها رو باید از کجاا یاد گرفت؟
مثه این:
.container > header
علامت < چیه؟
یا
.codrops-icon:before
:before؟!
یا
.nav li:nth-child(6n+1)
:nth-child(6n+1) ?!!!

[s0110h]

دوستانی که اطلاعات دارن لطفا بجای تنبلی به این دوستمون کمک کنن
یخورده هم یاد قبلا های خودتون بیفتید....:عصبانی:

[سعید کشاورز]

دوستانی که اطلاعات دارن لطفا بجای تنبلی به این دوستمون کمک کنن
یخورده هم یاد قبلا های خودتون بیفتید....:عصبانی:

به تاریخ تاپیک دقت کن.....از سال 94 تا الان فکر کنم دیگه جوابش رو پیدا کرده...
قبل از اینکه پست بدین تاریخ هم یه نگاه بندازین ثواب داره