#javascript #html #css
#javascript #HTML #css
Вопрос:
Пожалуйста, помогите мне с моим кодом, который я добавил в js fiddle
Я добавил его в js fiddle..Не могли бы вы, пожалуйста, проверить один раз и дать мне знать
Я добавил свой css, пожалуйста, проверьте один раз и дайте мне знать, где на самом деле возникает проблема, поскольку я разделил свой header.php файл и включил его на все страницы, но на мобильном устройстве отображаются только горизонтальные линии, и при нажатии на него ничего не происходит. Вот мой код (в выпадающем списке я написал то же самое со своим контентом)
<html lang="en">
<head>
<title>Best Hair Transplant Clinic in Hyderabad, Vijayawada and Bangalore</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="GA Digital Solutions">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
<link href="plugins/jquery-datepicker/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
</head>
<style>
.dropbtn {
background-color: #ffffff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
} .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
} .dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ffffff;}
.icon-bar {
position: fixed;
top: 60%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
} .icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
} .icon-bar a:hover {
background-color: #000;
}
<header class="header trans_400" style="height:140px">
<div class="header_content d-flex flex-row align-items-center jusity-content-start trans_400">
<!-- Logo -->
<div class="logo">
<a href="index.php">
<img src="images/logo.png">
</a>
</div>
<!-- Main Navigation -->
<nav class="main_nav" style="margin-top:50px">
<ul class="d-flex flex-row align-items-center justify-content-start">
<!--<li class="active"><a href="index.php">HOME</a> </li>-->
<li class=""><a href="index.php">HOME</a> </li>
<li><a href="about-us.php">ABOUT US</a></li>
<div class="dropdown">
<li class="dropbtn"><a href="#">SERVICES</a></li>
<div class="dropdown-content">
<a class="dropdown-item" href="hair-transplant-in-india.php"><?php echo strtoupper("Hair Transplant");?></a>
<a class="dropdown-item" href="fue-hair-transplant.php">FUE Hair Transplant</a>
<a class="dropdown-item" href="fut-hair-transplant.php">FUT Hair Transplant</a>
<a class="dropdown-item" href="hair-transplant-in-india.php">Hair Replacement</a>
<a class="dropdown-item" href="prp-hair-treatment.php">PRP Hair Treatment</a>
<a class="dropdown-item" href="hair-loss-treatment-in-india.php">Hair Loss Treatment</a>
<a class="dropdown-item" href="laser-hair-therapy.php">Lase Hair Therapy</a>
<a class="dropdown-item" href="hair-extensions.php">Hair Extensions</a>
<a class="dropdown-item" href="laser-hair-comb.php">Laser Hair Comb</a>
</div>
</div>
<li><a href="results.php">OUR RESULTS</a></li>
<li><a href="blog.php">BLOGS</a></li>
<li><a href="contact.php">CONTACT </a></li>
</ul>
</nav>
<div class="header_extra d-flex flex-row align-items-center justify-content-end ml-auto">
<!-- Appointment Button -->
<div class="button button_1 header_button" style="margin-top:45px"><a href="get-free-consultation.php">Get a Consultation</a></div>
<!-- Header Social -->
<div class="" style="margin-top:40px">
<ul class="d-flex flex-row align-items-center justify-content-start">
<li><a href="https://api.whatsapp.com/send?phone=918019012307amp;amp;text=I'm interested in your services" target="_blank"><img src="images/whatsapp.png" height="40px" width="40px" style="margin-top:12px"></a></li>
</ul>
</div>
<!-- Hamburger -->
<div class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
<div class="icon-bar" style="padding-left:1300px">
<a href="#phonecall" class="phone">
<i class="fa fa-phone">
</i>
</a>
</div>
</header>
Комментарии:
1. Нам нужен весь ваш код (CSS, JS …). Без этого очень сложно разобраться в проблеме.
2. Где находится тело?
3. Если вы настроили свой код на jsfiddle. net мы можем с этим поиграть.