Can somebody tell me, how can I fix the drop-down menu? after taking cursor, the drop-down items are not visible if I put an image in a different section but drop-down is visible if I don't put any image. But I need to put the image. please tell me what I did wrong.
here is my HTML code=
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<header>
<div class="menu-bar">
<nav>
<ul>
<li><i class="fa fa-home"></i><span class="data-hover"data-hover="home"> Home</span></li>
<li><span class="data-hover" data-hover="Shortcodes"><i class="fa fa-file-text-o"></i> About</span>
<ul>
<li>D1</li>
<li>D2</li>
</ul>
</li>
<li><i class="fa fa-briefcase" aria-hidden="true"></i> Our work</span>
<ul>
<li>D3</li>
<li><a href="#">D4/a></li>
</ul>
</li>
<li><span class="data-hover" data-hover="Portfolio"><i class="fa fa-users" aria-hidden="true"></i> Galary</span>
<ul>
<li>D5</li>
<li>D6</li>
</ul>
</li>
<li> <span class="data-hover" data-hover="contact"><i class="fa fa-phone" aria-hidden="true"></i> Contact</span></li>
</ul>
</nav>
</div>
</header>
<section>
<div class="page_head">
<div class="contained">
<h1>XXXXXXXX</h1>
</div>
</div>
</section> </body> </html>
and here is CSS code
.menu-bar{
background: #2c97e4;
}
nav{
height: 40px;
width: 960px;
display: block;
margin-left: 250px;
}
nav li a{
display: block;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color:white;
text-align: center;
text-transform: capitalize;
overflow: visible;
}
nav a:hover{
background: red;
color:white;
text-decoration: none;
}
nav ul{
list-style: none;
}
nav ul li{
float: left;
width: 150px;
height: 40px;
line-height: 40px;
background: #2c97e4;
overflow-y: visible;
margin-right: 30px;
}
nav ul li ul li{
position: relative;
display: none;
right:50px;
}
nav ul li:hover ul li{
display: block;
width: 200px;
padding:1px;
position: relative;
animation: nacm 500ms forwards;
}
#keyframes nacm{
0%{
opacity: 0;
top:5px;
}
100%{
opacity: 1;
top:0;
}
}
.contained{
width:90%;
margin:auto;
overflow:hidden;
}
.page_head{
background: url(c-1.jpg);
background-size:cover;
background-position:center;
height:100%;
width:100%;
padding-bottom:2%;
position:relative;
z-index:99;
padding-top:110px;
padding-bottom:82px;
}
.page_head .contained h1{
font-size:50px;
color:#FF4500;
float: left;
text-decoration: none;
text-underline-position:under;
text-decoration-color: #FF4500;
letter-spacing:3px;
}
This work for me:
.menu-bar {
background: #2c97e4;
}
nav {
height: 40px;
width: 960px;
display: block;
margin-left: 250px;
}
nav li a {
display: block;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
text-transform: capitalize;
overflow: visible;
}
nav a:hover {
background: red;
color: white;
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 150px;
height: 40px;
line-height: 40px;
background: #2c97e4;
overflow-y: visible;
margin-right: 30px;
}
nav ul li ul li {
position: relative;
display: none;
right: 50px;
}
nav ul li:hover ul li {
display: block;
width: 200px;
padding: 1px;
position: relative;
animation: nacm 500ms forwards;
}
#keyframes nacm {
0% {
opacity: 0;
top: 5px;
}
100% {
opacity: 1;
top: 0;
}
}
.contained {
width: 90%;
margin: auto;
overflow: hidden;
}
.page_head {
background: url(c-1.jpg);
background-attachment: fixed;
height: 690px;
background-size: cover;
background-position: center;
width: 100%;
padding-bottom: 2%;
position: relative;
z-index: -1;
padding-top: 110px;
padding-bottom: 82px;
}
.page_head .contained h1 {
font-size: 50px;
color: #FF4500;
float: left;
text-decoration: none;
text-underline-position: under;
text-decoration-color: #FF4500;
letter-spacing: 3px;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<header>
<div class="menu-bar">
<nav>
<ul>
<li><i class="fa fa-home"></i><span class="data-hover"data-hover="home"> Home</span></li>
<li><span class="data-hover" data-hover="Shortcodes"><i class="fa fa-file-text-o"></i> About</span>
<ul>
<li>D1</li>
<li>D2</li>
</ul>
</li>
<li><span class="data-hover" data-hover="pages"><i class="fa fa-briefcase" aria-hidden="true"></i> Our work</span>
<ul>
<li>D3</li>
<li>D4</li>
</ul>
</li>
<li><span class="data-hover" data-hover="Portfolio"><i class="fa fa-users" aria-hidden="true"></i> Galary</span>
<ul>
<li>D5</li>
<li>D6</li>
</ul>
</li>
<li>
<span class="data-hover" data-hover="contact"><i class="fa fa-phone" aria-hidden="true"></i> Contact</span>
</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="page_head">
<div class="contained">
<h1>XXXXXXXX</h1>
</div>
</div>
</section>
</body>
</html>
Related
In my navigation section I have sections for Home, Brass, Woodwind, Percussion, Additional Equipment, Maintenance. The Brass, Woodwind, and Percussion sections are supposed to dropdown to reveal pages that belong to those sections, but I'm having trouble making that happen. I've tried the following code to make it work, but it isn't working.
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-angle-double-right"></i>Brass</li>
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
<li><i class="fas fa-angle-double-right"></i>Woodwind</li>
<li><i class="fas fa-angle-double-right"></i>Percussion</li>
<li><i class="fas fa-angle-double-right"></i>Additional Materials</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
</div>
</body>
</html>
did you try this?
[I just suggest using a class or ID]
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979c9c;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
.wrapper .sidebar ul li:hover {
background-color: #b1b6b6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.wrapper .sidebar ul ul {
display: none;
position: relative;
}
.wrapper .sidebar ul:hover ul {
display: block;
}
</style>
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li>
<i class="fas fa-home"></i>Home
</li>
<li>
<i class="fas fa-angle-double-right"></i>Brass
</li>
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
<li>
<i class="fas fa-angle-double-right"></i>Woodwind
</li>
<li>
<i class="fas fa-angle-double-right"></i>Percussion
</li>
<li>
<i class="fas fa-angle-double-right"></i>Additional Materials
</li>
<li>
<i class="fas fa-toolbox"></i>Maintenance
</li>
</ul>
</div>
</div>
</body>
</html>
The first problem was that your li for Brass was not properly closed. It did not wrap the child elements properly.
Then I made a little adjustment to the CSS and HTML. I added a class, .hidden-child, to the child li(s). This should make sure, your hover doesn't trigger the display of every child ul of all the menu items, to open when you hover over one menu item.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper > .sidebar > ul > li .hidden-child {
display: none;
}
.wrapper .sidebar ul li:hover .hidden-child {
/* background-color: #B1B6B6; */
display: block
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li menuit><i class="fas fa-angle-double-right"></i>Brass
<ul class="hidden-child">
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li><i class="fas fa-angle-double-right"></i>Woodwind</li>
<li><i class="fas fa-angle-double-right"></i>Percussion</li>
<li><i class="fas fa-angle-double-right"></i>Additional Materials</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
</div>
</body>
</html>
When I hover "company" my navigation bar is not responding (it should have show sub-menu when it's hovered), can somebody please help me out?
I tried many things but it just doesn't work.
So that's why I am asking for your help.
HTML CODE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bobo Web</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topbar">
<i class="fa fa-phone"></i>
<p> Whatsapp: +86-15381188302 </p>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<p> Beogard Serbija, 500000</p>
<div class="icone">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
</div>
<nav>
<img src="img/logo.png">
<input type="search" placeholder="Search ...">
<ul>
<li>home</li>
<li>company <span class="chevron bottom"></span></li>
<div class="sub-menu-1"> //This submenu doesn't show when it's hovered
<ul>
<li>News</li>
<li>About us</li>
<li>Certificate</li>
<li>R & D Teams</li>
<li>Inovation</li>
</ul>
</div>
<li>products <span class="chevron bottom"></span></li>
<li>knowledge <span class="chevron bottom"></span></li>
<li>online store <span class="chevron bottom"></span></li>
<li>contact us</li>
</ul>
</nav>
<img src="img/pozadina.png">
<p id="p1"> About our compnay</p>
</body>
</html>
CSS code:
*{
margin: 0px;
padding: 0px;
}
.topbar{
background-color: #1fa9e5;
height: 100%;
width: 100%;
display: block;
box-sizing: content-box;
}
.top-bar * {
font-size: inherit;
line-height: inherit;
}
.topbar p{
display: inline-block;
margin-right: 30px;
color: white;
padding: 8px 0;
}
.fa-phone, .fa-map-marker, .fa-facebook-square,.fa-twitter-square,.fa-youtube-square{
color: white;
}
.icone{
float: right;
margin-right: 10px;
}
.icone i{
padding-top : 6px;
padding-left: 10px;
}
nav{
width: 100%;
height: 95px;
}
nav ul{
text-align: center;
}
nav ul li{
display: inline-block;
padding: 40px 40px;
}
nav ul li a{
text-transform: uppercase;
font-size: 16px;
text-decoration: none;
font-weight: bold;
color: black;
}
nav ul li:hover{
background: #e0f8f6;
}
nav img{
position: absolute;
height: 70px;
padding-left: 20px;
padding-top: 10px;
}
.chevron {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
top: 0;
transform: rotate(135deg);
}
#p1{
text-transform: uppercase;
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 80px;
}
nav input{
float: right;
padding: 6px;
margin-top: 30px;
margin-right: 16px;
border: none;
font-size: 17px;
background: #f4f4f4;
}
.sub-menu-1{
display: none;
}
.nav ul li:hover .sub-menu-1{ //Not working at all
display: block;
position:absolute;
background: yellow;
margin-top: 15px;
margin-left: -15px;
}
Your selector line for current HTML should be:
nav ul li:hover + .sub-menu-1 { /*Not working at all*/
Problems:
<nav> doesn't have a class of nav, so it should be nav instead of .nav
.sub-menu-1 is a sibling, not a child so you should use +( Adjacent sibling combinator)
// is not valid CSS comment syntax, it can break compilation of that line
.sub-menu-1 is a <div> which is direct child of <ul>, this is invalid HTML, it should be an <li> or within an <li>
*{
margin: 0px;
padding: 0px;
}
.topbar{
background-color: #1fa9e5;
height: 100%;
width: 100%;
display: block;
box-sizing: content-box;
}
.top-bar * {
font-size: inherit;
line-height: inherit;
}
.topbar p{
display: inline-block;
margin-right: 30px;
color: white;
padding: 8px 0;
}
.fa-phone, .fa-map-marker, .fa-facebook-square,.fa-twitter-square,.fa-youtube-square{
color: white;
}
.icone{
float: right;
margin-right: 10px;
}
.icone i{
padding-top : 6px;
padding-left: 10px;
}
nav{
width: 100%;
height: 95px;
}
nav ul{
text-align: center;
}
nav ul li{
display: inline-block;
padding: 40px 40px;
}
nav ul li a{
text-transform: uppercase;
font-size: 16px;
text-decoration: none;
font-weight: bold;
color: black;
}
nav ul li:hover{
background: #e0f8f6;
}
nav img{
position: absolute;
height: 70px;
padding-left: 20px;
padding-top: 10px;
}
.chevron {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
top: 0;
transform: rotate(135deg);
}
#p1{
text-transform: uppercase;
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 80px;
}
nav input{
float: right;
padding: 6px;
margin-top: 30px;
margin-right: 16px;
border: none;
font-size: 17px;
background: #f4f4f4;
}
.sub-menu-1{
display: none;
}
nav ul li:hover + .sub-menu-1 { /*Not working at all*/
display: block;
background: yellow;
margin-top: 15px;
margin-left: -15px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bobo Web</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topbar">
<i class="fa fa-phone"></i>
<p> Whatsapp: +86-15381188302 </p>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<p> Beogard Serbija, 500000</p>
<div class="icone">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
</div>
<nav>
<img src="img/logo.png">
<input type="search" placeholder="Search ...">
<ul>
<li>home</li>
<li class="parent">company <span class="chevron bottom"></span></li>
<li class="sub-menu-1"> //This submenu doesn't show when it's hovered
<ul>
<li>News</li>
<li>About us</li>
<li>Certificate</li>
<li>R & D Teams</li>
<li>Inovation</li>
</ul>
</li>
<li>products <span class="chevron bottom"></span></li>
<li>knowledge <span class="chevron bottom"></span></li>
<li>online store <span class="chevron bottom"></span></li>
<li>contact us</li>
</ul>
</nav>
<img src="img/pozadina.png">
<p id="p1"> About our compnay</p>
</body>
</html>
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
When I zoom in my page, all the elements go to left side, they are not collapsed but i want the web page to be on center when I zoom. I have made a container class and added a margin:auto to it bu it does not change anymore. Hope somebody answer it exactly.
#font-face {
font-family: irsans;
src:url('../fonts/irsans.woff2');
}
body{
margin:0;
}
.container{
margin:0 auto;
max-width:100%; /* requierd width */
background:red;
}
header {
width: 100%;
margin: auto;
height: 150px;
background-color: #FCFCFC;
}
.topnav{
position: absolute;
left: 334px;
top: 2px;
width: 552px;
height: 18px;
display: inline-block;
}
.topnav_items a{
margin: 2px;
font-size: 11px;
font-family: irsans;
color: #333;
float: left;
list-style: none;
padding: 0 5px;
}
.topnav_items li a:hover, .topnav_items li a:active {
text-decoration: none;
color: #8B9498;
}
<div class="container">
<header>
<div class="topnav">
<ul class="topnav_items">
<li class="fa fa-envelope-o" style="font-size:11px;">ارتباط با برنامه</li>
<li class="fa fa-bar-chart" style="font-size:11px;">پیش بینی مسابقات</li>
<li class="fa fa-desktop" style="font-size:11px;">تبلیغات</li>
<li class="fa fa-download" style="font-size:11px;">نرم افزار مسابقات پیامکی 90</li>
</ul>
</div>
</header>
</div>
Put your container(better call it wrapper) insidw the header.
Give the Container a fixed with using the with of ur topnav.
put margin to margin: 0 auto;
tkae out all atribute related to position: absolut from ur topnav.
(If ur not happ with the result u can also try to give container a relative with. For example with: 50% margin: 0 25%;)
<header>
<div class="container">
<div class="topnav">
<ul class="topnav_items">
<li class="fa fa-envelope-o" style="font-size:11px;">ارتباط با برنامه</li>
<li class="fa fa-bar-chart" style="font-size:11px;">پیش بینی مسابقات</li>
<li class="fa fa-desktop" style="font-size:11px;">تبلیغات</li>
<li class="fa fa-download" style="font-size:11px;">نرم افزار مسابقات پیامکی 90</li>
</ul>
</div>
</div>
</header>
#font-face {
font-family: irsans;
src:url('../fonts/irsans.woff2');
}
body{
margin:0;
}
.container {
margin: 0 25%;
max-width: 552px;
}
header {
width: 100%;
margin: auto;
height: 150px;
background-color: #FCFCFC;
}
.topnav {
width: 100%;
height: 18px;
display: inline-block;
}
.topnav_items a{
margin: 2px;
font-size: 11px;
font-family: irsans;
color: #333;
float: left;
list-style: none;
padding: 0 5px;
}
.topnav_items li a:hover, .topnav_items li a:active {
text-decoration: none;
color: #8B9498;
}
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
font-size: 10px;
color: #eee;
padding-top: 30px;
margin-left: 10px;
text-decoration: none;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
padding-top: 80px;
}
.leftSideNav2__lists ul {
list-style: none;
padding-bottom: 10px;
}
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i><br>
Home<br>
<i class="material-icons">pause</i><br>
YouTubers<br>
<i class="material-icons">assignment</i><br>
Campaigns<br>
<i class="material-icons">message</i><br>
Messages<br>
<i class="material-icons">pause</i><br>
Videos<br>
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Codepen
I have an issue with the anchor links and lists in the sidebars. I am unable to align the anchor links and lists in the 2 sidebars. I am trying to apply the CSS properties but they aren't applying perhaps due to improper hierarchical style of applying.
Currently, this is how it looks:
But this is how I want it to look:
you can do it setting the parent container
.leftSideNav1__lists{
text-align:center;
}
an also removing the left margin from each a tag..
codepen
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
display: block;
text-align: center;
font-size: 10px;
color: #eee;
text-decoration: none;
margin-bottom: 20px;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
}
.leftSideNav2__lists ul {
list-style: none;
}
.leftSideNav1__lists > i{
display: block;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i>
Home
<i class="material-icons">pause</i>
YouTubers
<i class="material-icons">assignment</i>
Campaigns
<i class="material-icons">message</i>
Messages
<i class="material-icons">pause</i>
Videos
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Try this.