وضع شعار الموقع وبجانبه اسمه باستخدام html+css

الصورة تضم قسمين, الأول متعلق بإظهار الشعار و الثاني متعلق بالقائمة, سنعتمد مكتبة bootstrap في إنجاز العمل لتسهيل التنفيذ ثم نعتمد الكود التالي :

<!-- قسم الشعار -->
<a href="رابط الموقع" target="_self">
	<img id="logo" class="pull-right" src="رابط الصورة" border="0" alt="عنوان الصورة" style="vertical-align:middle;">
</a>
<div id="slogan" class="pull-right col-md-5 col-sm-5 col-md-5 col-xs-6">
  <span class="ar">جامعة القدس المفتوحة</span>
	<br>
  <span class="en">Al-Quds Open University</span>
</div>
<!-- قسم القائمة العلوية -->
<nav class="navbar marginBottom-0" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
		<span class=" mobTxt">القائمة</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		</button>
	</div>
	<div class="collapse navbar-collapse" id="navbar-collapse-1">
		<ul class="nav navbar-nav  text-right">
			<li><a href="#" target="_self" aria-expanded="false"></a></li>
			<li><a href="#" target="_blank">عنوان القسم</a></li>
			<li><a href="#" target="_blank">عنوان القسم</a></li>
			<li><a href="#" target="_blank">عنوان القسم</a></li>
      	</ul>
  	</div>
</nav>

ثم نضيف كود الـcss التالي من أجل التنسيق

img#logo {
    width: 90px;
    margin-top: -8px;
}
#slogan {
    padding-top: 0;
    font-weight: 400;
    color: #333;
    padding-right: 8px;
    margin-bottom: 20px;
}
#slogan .ar {
    font-family: midan-reg,Arial;
    font-size: 40px;
}
#slogan .en {
    font-family: myriad-reg,Arial;
    font-size: 23.5px;
}
.navbar.marginBottom-0 {
    margin-bottom: 0;
}
.navbar {
    min-height: initial;
    border: 0 solid transparent;
}
#navbar-collapse-1 .navbar-nav {
    float: none;
    padding-right: 0;
    text-align: center;
    line-height: 9px;
    margin-bottom: 4px;
}
#navbar-collapse-1>ul>li {
    font-size: 1.45rem;
}
.navbar-nav>li {
    float: none;
    display: inline-block;
}
#navbar-collapse-1>ul>li>a {
    color: #6f6f6f;
}

li#homeIcon a {
    top: 3px;
}
#homeIcon a {
    font-family: FontAwesome;
    font-size: 25px;
}
#navbar-collapse-1 .dropdown ul.dropdown-menu {
    display: none;
}
.nav>li>a {
    display: inline-block;
    padding: 0;
    line-height: 1.1;
}
/* من أجل العلامة الفاصلة بين كل عنصر */
#navbar-collapse-1>ul>li:after {
    content: "|";
    color: #999;
    padding-left: 5px;
    padding-right: 5px;
}