با سلام و عرض ادب
استاد من از سایت تم شاپ دارم کمک میگیرم و قالب دانلود میکنم و از روش کد میزنم.
الان در قسمت منو همه چیز خوبه فقط مشکل ریسپانسیو هستش.
وقتی از یه صفحه مشخص کوچکتر بشه یه گزینه 3 خطی می اید برای باز شدن منو.
الان مشکل اینه که اون حالت ریسپانسیو قرار نمیگیره.یعنی منویی وجود نداره در حالت گوشی.
کد html , css
<button type="button" class="mobile-nav-toggle d-lg-none">
<i class="fa fa-bars">
</i>
</button>
<div style="display: none;width: 200px;height: 500px;background-color: blue;" class="bb">
</div>
<header id="header" class="fixed-top">
<div class="container">
<!--start logo-->
<div class="logo float-left">
<a href="#intro" class="scrollto">
<img src="logo.png" alt="" class="img-fluid">
</a>
</div>
<!--end logo-->
<!--strat gozineha-->
<nav class="main-nav float-right d-none d-lg-block ">
<ul>
<li><a href="#" class="text-decoration-none">تماس با ما</a></li>
<li><a href="#" class="text-decoration-none">وبلاگ</a></li>
<li><a href="#" class="text-decoration-none">سرویس ها</a></li>
<li><a href="#" class="text-decoration-none">پروژه ها</a></li>
<li><a href="#" class="text-decoration-none">تیم ما</a></li>
<li><a href="#" class="text-decoration-none">امکانات</a></li>
<li><a href="#" class="text-decoration-none">خانه</a></li>
</ul>
</nav>
<!--end gozineha-->
</div>
</header>
#header {
height: 80px;
z-index: 997;/*new*/
transition:0.5s;/*new*/
padding: 20px 0;
background-color: #fff;
box-shadow:0px 0px 30px rgba(127, 137, 161, 0.3);/*new*/
}
.fixed-top
{
position: fixed;
top: 0;
right: 0;
left: 0;
}
@media (min-width: 1200px) /*new*/
{
.container
{
max-width: 1140px;
}
}
.container
{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.float-left
{
float: left !important;
}
a
{
color: #007bff;
transition: 0.5s;
text-decoration: none;
background-color: transparent; /*new*/
}
#header .logo img{
padding: 0;
margin: 7px 0;
max-height: 26px;
}
img
{
vertical-align: middle;
border-style: none;
}
.img-fluid
{
max-width: 100%;
height: auto;
}
.main-nav, .main-nav *
{
margin: 0;
padding: 0;
list-style: none;
}
.float-right
{
float: right !important;
}
@media (min-width: 992px)
{
.d-lg-block
{
display: block !important;
}
}
.main-nav>ul>li
{
position: relative;
white-space: nowrap;
float: left;
}
.main-nav a
{
display: block;
position: relative;
color: #004289;
transition: 0.3s;
font-size: 15px;
font-weight: 500;
padding: 10px 15px;
}
.mobile-nav-toggle
{
position: fixed;
right: 0;
top: 0;
z-index: 9998;
border: 0;
background-color: white;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
text-align: right;
cursor: pointer;
}
button
{
margin: 0;
}
@media (min-width: 992px)
{
.d-lg-block
{
display: none !important;
}
}
.mobile-nav-toggle i
{
margin: 18px 18px 0 0;
}
button
{
background-color: white;
}
@media (max-width: 992px)
{
.bb
{
display: inline-block !important;
}
}
سلام. شما باید دو تا منو تعریف کنید یکی همبرگر و یکی اصلی. که مثلا تو این عرض صفحه همبرگر هاید شه.
نه اون گزینه ها بالا نمیاد.
اگه تونستین پروژه رو برام ایمیل کنین. بررسی کنم الان
amirali.r2007@gmail.com
با سلام خدمت شما همراه عزیز
اگر نمیاد حتما نداره این قالب خودتون بهش اضافه کنید
نه برای قالب داره برای من نمیاره.
نمیدونم مشکل کد کجاست
نمیدونم والا از اینسپکت کمک بگیرید نمیشه حدس زد