i have a proplem with my navbar
the content comes up on my navbar
so can any one help me to fix it
i useing django include to get the navbar
so can any one help me plese
the image
some text pec there a err while post the q
some text pec there a err while post the q
some text pec there a err while post the q
some text pec there a err while post the q
.................................................
this is my code
{% block content %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
{% if user.is_authenticated %}
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<li class="logo"><a class="alog" href="#">Website</a></li>
<ul class="links">
<li>Home</li>
<li>lunchers</li>
<li>resourepacks</li>
<li>aboutus</li>
<li>
More
<input type="checkbox" id="show-services">
<label for="show-services">More</label>
<ul>
<li>Create Post</li>
<li>Drop Menu 2</li>
<li>Drop Menu 3</li>
</li>
</div>
<a style="padding-top: -50px;" class="aimpro" href="{% url 'profile' user.profile.id %}"><img style="padding-top: -10px;" src="{{ user.profile.avatar.url }}" alt="Avatar" class="avatar"></a>
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{% url 'sh' %}" class="search-box">
<input name="title" type="text" placeholder="Type Something to Search..." required>
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
</nav>
</div>
{% else %}
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<li class="logo"><a class="alog" href="#">Website</a></li>
<ul class="links">
<li>Home</li>
<li>lunchers</li>
<li>resourepacks</li>
<li>aboutus</li>
<li>login</li>
</div>
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{% url 'sh' %}" class="search-box">
<input name="title" type="text" placeholder="Type Something to Search..." required>
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
</nav>
</div>
{% endif %}
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.wrapper{
background: #171c24;
position: fixed;
width: 100%;
}
.wrapper nav{
position: relative;
display: flex;
max-width: calc(100% - 200px);
margin: 0 auto;
height: 70px;
align-items: center;
justify-content: space-between;
top: 4px;
}
a .aimpro {
padding-bottom: 10px;
}
nav .content{
display: flex;
align-items: center;
text-decoration: none;
top: 10px;
}
nav .content .links{
margin-left: 40px;
display: flex;
text-decoration: none;
padding-top: 11px;
}
.content .logo .alog{
color: #fff;
font-size: 25px;
font-weight: 60;
padding-top: 0px !important;
text-decoration: none;
top: -5px;
}
.content .links .logo .alog label:hover {
background-color: #171c24;
}
.content .links li{
list-style: none;
line-height: 70px;
top: 5px;
}
.content .links li a,
.content .links li label{
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 9px 17px;
border-radius: 5px;
transition: all 0.3s ease;
text-decoration: none;
top: -5px;
}
.content .links li label{
top: 5px;
display: none;
text-decoration: none;
}
.content .links li a:hover,
.content .links li label:hover{
background: #323c4e;
text-decoration: none;
}
.wrapper .search-icon,
.wrapper .menu-icon{
color: #fff;
font-size: 18px;
cursor: pointer;
line-height: 70px;
width: 70px;
text-align: center;
text-decoration: none;
top: -5px;
}
.wrapper .menu-icon{
display: none;
text-decoration: none;
top: -5px;
}
.wrapper #show-search:checked ~ .search-icon i::before{
content: "\f00d";
text-decoration: none;
top: -5px;
}
.wrapper .search-box{
position: absolute;
height: 100%;
max-width: calc(100% - 50px);
width: 100%;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
text-decoration: none;
top: -5px;
}
.wrapper #show-search:checked ~ .search-box{
opacity: 1;
pointer-events: auto;
text-decoration: none;
top: -5px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 17px;
color: #fff;
background: #171c24;
padding: 0 100px 0 15px;
text-decoration: none;
top: -5px;
}
.search-box input::placeholder{
color: #f2f2f2;
text-decoration: none;
}
.search-box .go-icon{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
line-height: 60px;
width: 70px;
background: #171c24;
border: none;
outline: none;
color: #fff;
font-size: 20px;
cursor: pointer;
text-decoration: none;
}
.wrapper input[type="checkbox"]{
display: none;
text-decoration: none;
}
/* Dropdown Menu code start */
.content .links ul{
position: absolute;
background: #171c24;
top: 80px;
z-index: -1;
opacity: 0;
visibility: hidden;
text-decoration: none;
}
.content .links li:hover > ul{
top: 65px;
padding-bottom: 5px;
padding-top: 5px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
text-decoration: none;
}
.content .links ul li a{
display: block;
width: 100%;
line-height: 30px;
border-radius: 0px!important;
text-decoration: none;
}
.content .links ul ul{
position: absolute;
top: 0;
right: calc(-100% + 8px);
}
.content .links ul li{
position: relative;
}
.content .links ul li:hover ul{
top: 0;
}
/* Responsive code start */
#media screen and (max-width: 1250px){
.wrapper nav{
max-width: 100%;
padding: 0 20px;
}
nav .content .links{
margin-left: 30px;
}
.content .links li a{
padding: 8px 13px;
}
.wrapper .search-box{
max-width: calc(100% - 100px);
}
.wrapper .search-box input{
padding: 0 100px 0 15px;
}
}
#media screen and (max-width: 900px){
.wrapper .menu-icon{
display: block;
}
.wrapper #show-menu:checked ~ .menu-icon i::before{
content: "\f00d";
}
nav .content .links{
display: block;
position: fixed;
background: #14181f;
height: 100%;
width: 100%;
top: 70px;
left: -100%;
margin-left: 0;
max-width: 350px;
overflow-y: auto;
padding-bottom: 100px;
transition: all 0.3s ease;
text-decoration: none;
}
nav #show-menu:checked ~ .content .links{
left: 0%;
}
.content .links li{
margin: 15px 20px;
}
.content .links li a,
.content .links li label{
line-height: 40px;
font-size: 20px;
display: block;
padding: 8px 18px;
cursor: pointer;
text-decoration: none;
}
.content .links li a.desktop-link{
display: none;
text-decoration: none;
}
/* dropdown responsive code start */
.content .links ul,
.content .links ul ul{
position: static;
opacity: 1;
visibility: visible;
background: none;
max-height: 0px;
overflow: hidden;
top: -5px;
}
.content .links #show-features:checked ~ ul,
.content .links #show-services:checked ~ ul,
.content .links #show-items:checked ~ ul{
max-height: 100vh;
top: -5px;
}
.content .links ul li{
margin: 7px 20px;
top: -5px;
}
.content .links ul li a{
font-size: 18px;
line-height: 30px;
border-radius: 5px!important;
top: -5px;
}
}
#media screen and (max-width: 400px){
.wrapper nav{
padding: 0 10px;
}
.content .logo a{
font-size: 27px;
}
.wrapper .search-box{
max-width: calc(100% - 70px);
}
.wrapper .search-box .go-icon{
width: 30px;
right: 0;
}
.wrapper .search-box input{
padding-right: 30px;
}
}
.dummy-text{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
z-index: -1;
padding: 0 20px;
text-align: center;
transform: translate(-50%, -50%);
}
.dummy-text h2{
font-size: 45px;
margin: 5px 0;
}
.avatar {
vertical-align: middle;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
{% endblock %} ```
Related
I'm not a front-end developer in fact I've basically copy-pasted an open-source nav bar and pasted it on my project editing the colors and id tags.
For some reason on Chrome, Edge, Opera the nav bar works perfectly while in Mozilla looks very buggy (see screenshot as I don't know how to describe it - left looks ok, right looks buggy) and I do not know why. Below is my code (don't mind the Django code injected) :
HTML
<nav id="main_nav" class="sidebar close"> <!-- cloe class to keep it close -->
<header>
<div class="image-text">
<span class="image">
<img src="logo.png" alt="">
</span>
<div class="text logo-text">
<span class="name">The Groove Cartel</span>
<span class="profession">Playlist Manager</span>
</div>
</div>
<i class='bx bx-chevron-right toggle'></i>
</header>
<div class="menu-bar">
<div class="menu">
<ul class="menu-links">
<li class="nav-link">
<a href="/">
<i class='bx bx-home-alt icon' ></i>
<span class="text nav-text">Home</span>
</a>
</li>
</ul>
</div>
<div class="bottom-content">
{% if user.is_authenticated %}
<li class="">
<a href="{% url 'account' user.username%}">
<i class='bx bxs-user-detail icon' ></i>
<span class="text nav-text">My profile</span>
</a>
</li>
{% endif %}
<li class="mode">
<div class="sun-moon">
<i class='bx bx-moon icon moon'></i>
<i class='bx bx-sun icon sun'></i>
</div>
<span class="mode-text text">Dark mode</span>
<div class="toggle-switch">
<span class="switch"></span>
</div>
</li>
</div>
</div>
</nav>
CSS
/* ===== Sidebar ===== */
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 280px;
padding: 10px 14px;
background: var(--sidebar-color);
transition: var(--tran-05);
z-index: 100;
}
.sidebar.close{
width: 88px;
}
/* ===== Reusable code - Here ===== */
.menu-links{
padding-left: 0px !important;
}
.sidebar li{
height: 50px;
list-style: none;
display: flex;
align-items: center;
margin-top: 10px;
padding: 0px !important;
}
.sidebar header .image,
.sidebar .icon{
min-width: 60px;
border-radius: 6px;
}
.sidebar .icon{
min-width: 60px;
border-radius: 6px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.sidebar .text,
.sidebar .icon{
color: var(--text-color);
transition: var(--tran-03);
}
.sidebar .text{
font-size: 17px;
font-family: Poppins-Medium;
white-space: nowrap;
opacity: 1;
}
.sidebar.close .text{
opacity: 0;
}
/* =========================== */
.sidebar header{
position: relative;
}
.sidebar header .image-text{
display: flex;
align-items: center;
}
.sidebar header .logo-text{
display: flex;
flex-direction: column;
}
header .image-text .name {
margin-top: 2px;
font-size: 18px;
font-family: Poppins-SemiBold;
}
header .image-text .profession{
font-size: 16px;
margin-top: -2px;
display: block;
}
.sidebar header .image{
display: flex;
align-items: center;
justify-content: center;
}
.sidebar header .image img{
width: 40px;
border-radius: 6px;
}
.sidebar header .toggle{
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%) rotate(180deg);
height: 25px;
width: 25px;
background-color: var(--primary-color);
color: var(--sidebar-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: var(--tran-05);
}
body.dark .sidebar header .toggle{
color: var(--text-color);
}
.sidebar.close .toggle{
transform: translateY(-50%) rotate(0deg);
}
.sidebar .menu{
margin-top: 40px;
}
.sidebar li.search-box{
border-radius: 6px;
background-color: var(--primary-color-light);
cursor: pointer;
transition: var(--tran-05);
}
.sidebar li.search-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
background-color: var(--primary-color-light);
color: var(--text-color);
border-radius: 6px;
font-size: 17px;
font-family: Poppins-Medium;
transition: var(--tran-05);
}
.sidebar li a{
list-style: none;
height: 100%;
background-color: transparent;
display: flex;
align-items: center;
height: 100%;
width: 100%;
border-radius: 6px;
text-decoration: none;
transition: var(--tran-03);
}
.sidebar li a:hover{
background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
color: var(--text-color);
}
.sidebar .menu-bar{
height: calc(100% - 55px);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar{
display: none;
}
.sidebar .menu-bar .mode{
border-radius: 6px;
background-color: var(--primary-color-light);
position: relative;
transition: var(--tran-05);
}
.menu-bar .mode .sun-moon{
height: 50px;
width: 60px;
}
.mode .sun-moon i{
position: absolute;
}
.mode .sun-moon i.sun{
opacity: 0;
}
body.dark .mode .sun-moon i.sun{
opacity: 1;
}
body.dark .mode .sun-moon i.moon{
opacity: 0;
}
.menu-bar .bottom-content .toggle-switch{
position: absolute;
right: 0;
height: 100%;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
}
.toggle-switch .switch{
position: relative;
height: 22px;
width: 40px;
border-radius: 25px;
background-color: var(--toggle-color);
transition: var(--tran-05);
}
.switch::before{
content: '';
position: absolute;
height: 15px;
width: 15px;
border-radius: 50%;
top: 50%;
left: 5px;
transform: translateY(-50%);
background-color: var(--sidebar-color);
transition: var(--tran-04);
}
body.dark .switch::before{
left: 20px;
}
.home{
position: absolute;
top: 0;
top: 0;
left: 280px;
height: 100vh;
width: calc(100% - 280px);
background-color: var(--body-color);
transition: var(--tran-05);
}
.home .text{
font-size: 30px;
font-family: Poppins-Medium;
color: var(--text-color);
padding: 12px 60px;
}
.sidebar.close ~ .home{
left: 78px;
height: 100vh;
width: calc(100% - 78px);
}
body.dark .home .text{
color: var(--text-color);
}
I have made 2 icon pngs that I would like to use instead of the ones I have here from Font Awesome. But how do I insert them? I can't browse through pictures when I select class <label for="" class="cancel-btn"><i *class="fas fa-times"*></i></label but it doesn't seem to work at all.
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'
}
nav {
background: #036832;
position: fixed;
width: 100%;
z-index: 999;
}
nav .wrapper {
/* border */
max-width: 1250px;
padding: 0 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 65px;
}
.wrapper .nav-links {
display: inline-flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
/* menu bar */
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 4px;
transition: all 0.4s ease;
}
.nav-links li a:hover {
background: #213B35;
}
.nav-links .drop-menu {
background: #046832;
line-height: 45px;
position: absolute;
opacity: 0;
visibility: hidden;
}
.nav-links li:hover .drop-menu {
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
}
.drop-menu li a {
/* drop menu teksten */
display: block;
font-weight: 400;
border-radius: 10px;
}
div.picture1 {
width: 153px;
height: 60px;
background-image: url('Carlsberglogof.png');
}
.nav-links .mobile-item {
display: none;
}
#media screen and (max-width: 970px) {
/* drop menu mobil */
.wrapper .nav-links {
position: fixed;
display: block;
height: 100vh;
width: 100%;
max-width: 350px;
background: #046832;
top: 0;
left: 0;
overflow-y: auto;
line-height: 50px;
padding: 50px 10px;
box-shadow: 2px 15px 15px;
}
.nav-links li {
margin: 10px 10px;
}
.nav-links li a {
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu {
position: static;
opacity: 1;
visibility: visible;
padding-left: 10px;
max-height: 0px;
overflow: hidden;
}
#showdrop:checked~.drop-menu {
max-height: 100%;
}
.nav-links .drop-menu li {
margin: 0;
}
.nav-links .drop-menu li a {
font-size: 18px;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
font-size: 20px;
color: white;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.4s ease;
}
.nav-links .mobile-item:hover {
background: #213B35;
}
}
.wrapper input {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Carlsberg</title>
<link rel="stylesheet" href="Style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<div class="picture1"> </div>
<ul class="nav-links">
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
<li>Forside</li>
<li>
Mød os
<input type="checkbox" id="showdrop">
<label for="showdrop" class="mobile-item">Mød os</label>
<ul class="drop-menu">
<li>Organisation</li>
<li>Historien bag</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
</div>
</nav>
</body>
</html>
Hope someone can help, have a good day! :D
Just do it with an img tag:
<img src="your_icon_src" alt="" width="20" height="20">
body {
background-image: url("pirat.jpg");
}
h1{
font-size :100px;
}
h3{
font-size :50px;
}
<style type="text">
*{
box-sizing: border-box;
outline: none;
}
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100vh;
}
.container nav{
position: absolute;
width: 100%;
top: 0;
height: 60px;
background-color: #383838;
color: white;
}
nav ul{
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
}
nav li{
display: inline-block;
line-height: 56px;
margin:0 25px;
}
nav li a{
display: block;
color: white;
text-decoration: none;
font-size: 13px;
transition: .5s all;
}
a:hover{
color:#808080;
border-bottom: 5px solid white;
}
#myInput{
position: relative;
margin-top: 10px;
padding: 5px 10px 5px 20px;
width: 2300x;
height: 25px;
border-bottom: 2px solid#006699;
font-size: 15px;
color: #006699;
border-radius: 50px;
align-items: center;
float: right;
z-index: 0;
}
#btn{
display: none;
}
.check{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 20px;
margin-left: 10px;
cursor: pointer;
transform: rotate(-90deg);
display: none;
}
#media(max-width: 800px){
nav ul{
position: fixed;
width: 40%;
height: 100vh;
top: 60px;
left: 100%;
text-align: center;
background-color: #2c3e50;
transition: all .5s;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
color: white;
}
.check{
display: block;
}
#btn:checked ~ ul{
left: 60%;
}
#media(max-width: 500px){
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px; color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
.text input:focus + .hide {
display: block !important;
}
.hide {
display: none;
}
.container { position: relative; }
<html>
<head><title>Home</title>
<font color="white">
<center>
<h1></h1>
</center>
<link rel="stylesheet" type="text/css" href="Principala.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<font color="white">
<div class="relative">
<font color = "blue">
<h3></h3>
<div class="container">
<nav>
<input type="checkbox" name="" id="btn">
<label for="btn" class="check">!!!</label>
<div class="search"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="search engine"></div>
<ul>
<li>HOME</li>
<li>SERVICE</li>
<li>CONTACT</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</nav>
<div class=hide>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li></ul></div>
<script src="Principala.js"></script>
</script>
</body>
</html>
What is wrong? The suggestions don't want to show when I write in the search box
Hello guys i followed a nav bar tutorial on youtube and it worked well except when I reduced the screen size to test for mobile view the nav bar didn't turn into a toggled menu, this is my whole HTML CSS code, please tell me whats the problem and how to fix it.the tutorial owner told me to see the #media tag but I'm a newbie idk what that even means
*{
padding:0;
margin: 0;
text-decloration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family:montserrat;
}
nav{
background: #0082e6;
height: 80px;
width: 100%;
}
footer{
opacity: 0.5;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color:black;
font-size: 17px;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 3px;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display:block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
section{
background: url(bgl.jpg) no-repeat
background-size: coover;
height: calc(100vh - 80px):
}
}
<!Doctype HTML>
<html>
<head>
<footer> </footer>
<title>
EgyptPost/Latest news about Egypt
</title>
</head>
<body>
<nav>
<input type="checkbox" id"check">
<label for="check" class="checkbtn">
<i class="fas fa-bars" > </i>
</label>
<label class="logo">EgyptPost</label>
<ul>
<li><a class="active" href="#">Home </a> </li>
<li>Health </li>
<li>News </li>
<li>About Us </li>
<li>Contact Us/FeedBack </li>
</ul>
</nav>
<section>
</section>
<img src="WordpressLogo.jpg" width="70px" height="70px" alt="EgyptPost logo">
<h1> Egypt is expected to be the 7th largest economy in the world said the minister of finance Mohammed Maait.</h1>
<img src="download.jpg" width="600px" height="100px" alt="photo of egypt's 2030 vision">
<p>Egypt is a <b>stong growing economy</b> that has an overall ranking of 33th in the world, and the first in africa, egypt will outpreform countires nearby and will dominate</p>
<footer>End of the article </footer>
</body>
</html>
Actually what you trying to achieve is a responsive Navbar without Javascript using only HTML and CSS. So their so many mistakes in your provided code I have fix everything, now you can use this code to your build.
body {
padding: 0;
margin: 0;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: 'Montserrat', sans-serif;
padding: 0 5%;
height: 50px;
background-color: #3e65da;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 3px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
cursor:pointer;
transition: all .3s ease-in-out;
}
section{
margin:70px 20px 30px 20px;;
font-size:15px;
text-align:center;
}
.wrap{
display:flex;
}
.wrap p{
flex:2;
padding:0px 20px;
font-size:20px;
text-align:justify;
}
#media screen and (max-width: 768px) {
nav .logo {
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 50px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,1);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
<nav>
<input id="nav-toggle" type="checkbox">
<div class="logo"><strong>EgyptPost</strong></div>
<ul class="links">
<li>Home</li>
<li>Health</li>
<li>News</li>
<li>About Us</li>
<li>Contact Us/FeedBack</li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<section>
<h1> Egypt is expected to be the 7th largest economy in the world said the minister of finance Mohammed Maait.</h1>
<div class="wrap">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzEq1WfAEiCsDvkQshIy0-P-0OL2AFfwL_-A&usqp=CAU" alt="" />
<p>Egypt is a <b>stong growing economy</b> that has an overall ranking of 33th in the world, and the first in africa, egypt will outpreform countires nearby and will dominate</p>
</div>
</section>
You need to specify what it should be like in smaller resolutions and you should do that with media queries. Check the following link
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I have no idea why my drop down menu that im trying to include is not appearing and i cant seem to find whats wrong, i saw that the only way for it to appear is to remove hidden but if i do that i doesnt look how i want it to, yet if i have the hidden when i hover over the servicios tab its not showing anything which i cannot find the reason on why it doesnt appear there
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hero{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), url(bp.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
}
.nav_bar{
display: flex;
padding: 40px 120px;
}
.nav-logo img{
width: 135px;
}
.nav_links{
flex: 1;
}
.nav_links ul{
margin-left: 50px;
display: inline;
list-style: none;
}
.nav_links ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
.nav_links ul a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
.nav_links ul li::after{
content: '';
width: 0;
height: 2px;
background: red;
display: block;
margin: auto;
transition: 0.45s;
}
.nav_links ul li:hover::after{
width: 100%;
}
.btn{
padding: 10px 10px;
border: 0;
background: red;
font-weight: bold;
cursor: pointer;
}
.nav_links .btn{
float: center;
}
.frase{
margin: 100px 130px;
color: #fff;
}
.frase h1{
font-size: 56px;
margin-bottom: 30px;
}
.vertical_bar{
height: 100%;
background: red;
top: 0;
left: 0;
position: absolute;
}
.icono_busqueda{
height: 60%;
width: 80px;
}
.icono_busqueda .fa{
margin: 45px 23px;
display: block;
color: white;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 60%;
width: 80px;
}
.iconos_sociales .fa{
margin: 45px 23px;
display: block;
color:black;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 35%;
width: 80px;
background: white;
text-align: center;
padding-top: 27%;
bottom: 0;
position: absolute;
}
.iconos_sociales .fa{
margin: 15px 15px;
display: block;
padding: 8px;
border: 1px solid black;
border-radius: 0;
cursor: pointer;
}
*{
margin: 0;
padding: 0;
}
.sub_menu_ser
{
display: none;
}
.nav_links ul li:hover .sub_menu_ser
{
display: block;
position: absolute;
background: red;
margin-top: 15px;
margin-left: -15px;
}
.nav_links ul li:hover .sub_menu_ser ul
{
display: block;
margin: 10px;
}
.nav_links ul li:hover .sub_menu_ser li
{
width: 150px;
padding: 10px;
border-bottom: 1px dotted white;
background: transparent;
border-radius: 0;
text-align: left;
}
:last-child
{
border-bottom: none;
}
.nav_links ul li:hover .sub_menu_ser ul li a:hover
{
color: red;
}
<html>
<head>
<title> Animal Care</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="hero">
<div class="nav_bar">
<div class="nav_logo">
<img src="logo.png">
</div>
<div class="nav_links">
<ul>
<li>Sobre Nosotros</li>
<li>Servicios</li>
<div class="sub_menu_ser">
<ul>
<li>Peluqueria</li>
<li>Veterinario</li>
<li>Cirugia</li>
<li>Limpieza</li>
</ul>
</div>
<li>Contacto</li>
</ul>
<button type="button" class="btn">Registrarse</button>
</div>
<div class="frase">
<h1>Cuidando a Nuestros <br> Mas Queridos</h1>
<button type="button" class="btn">Explorar</button>
</div>
<div class="vertical_bar">
<div class="icono_busqueda">
<i class="fa fa-search"></i>
<i class="fa fa-list"></i>
</div>
<div class="iconos_sociales">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</body>
</html>
Code to hide the element:
#element {
display: none;
}
Code to show the element:
#element:hover {
display: block;
}