I am facing two major challenges and I am struggling to find solutions for them!
Below is the code snippet I am working with:
@font-face {
font-family: 'yekani';
src: url("../fonts/yekan.ttf");
}
@font-face {
font-family: 'yekani';
src: url("../fonts/yekan.eot");
}
@font-face {
font-family: 'yekani';
src: url("../fonts/yekan.woff");
}
body{
font-family: yekani;
}
.container-fluid{
padding: 0 6rem;
}
.menu{
}
.links a{
font-size: 1.25rem;
color: #333;
}
.menu{
box-shadow: 0 1px 4px 1px #d0d0d0;
}
.logo img{
width: 120px;
}
.btn-outline-primary{
border-width: 2px;
border-color: #cce1e7;
color: #3dacd9;
}
.navbar-nav .nav-link{
padding-left: 2rem !important;
}
.links i{
color: #f5f5f5;
font-size: 1.2rem;
}
.navbar-toggler i{
font-size: 2rem;
}
.navbar .dropdown {position:static;}
.navbar .dropdown-menu {
width:80rem;
left:0;
right:40rem;
/* height of nav-item */
top:5rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>مثال بوت استرپ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid menu">
<div class="d-flex ">
<div class="mr-auto ">
<button class="btn btn-outline-primary btn-lg mb-4 mt-4 pt-2 pb-2 ">
<i class="fas fa-arrow-left"></i>
عضویت : ورود
</button>
</div>
<div class="links ">
<nav class=" navbar navbar-expand-xl mb-4 mt-4">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" >
<i class="fas fa-bars text-dark "></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav navbar-light">
<li class="nav-item "><a class="nav-link " href="">ارتباط با ما</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >
دوره های مجازی
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" > دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
</div>
</li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link" href="">دوره های متخصص</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link borderl" href="">محتوا</a></li>
</ul>
</div>
</nav>
</div>
<div class="logo mt-4 mb-4 ml-5 d-none d-xl-block">
<img src="https://s.7learn.com/themes/slt/assets/img/logo.png" alt="">
</div>
</div>
</div>
</body>
</html>One issue I am facing is with the menu icon, which seems to be moving unexpectedly. I have tried to make it stationary, but have not been successful. The second problem relates to the dropdown menu, which I want to be full width. Despite my efforts, the dropdown menu width is not as expected and causes the layout to break to the right. If you make any changes to my code, please explain them to me. Thank you and apologies for any grammatical errors, as English is not my first language.