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>
Related
When I hover over the brass section of my navigation menu, I want to be able to hover over each item within and have a background color individually instead of all together. My problem is when I hover over the brass section that the entire block has a background color outright instead of going through one part at a time.
*{
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 {
display: flex;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.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 a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
<!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
<ul>
<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 Equipment</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
It appears your main issue was failing to close your <li> on the "Brass" line. I also noticed a few other minor errors in your formatting. HTML is very dependent on proper formatting, so please make sure you do this in the future. I would recommend using an widget on your IDE editor to allow auto formatting.
*{
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 {
display: flex;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.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 a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
.wrapper .sidebar ul.sub-menu li a:hover {
color: black;
}
<!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
<ul class="sub-menu">
<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 Equipment</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
You can set hover to your anchor | a element:
.wrapper .sidebar ul li > a {
display: block;
padding: 15px;
}
.wrapper .sidebar ul li a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover > a {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover > a {
color: #fff;
}
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>
I'm currently working on multiple css dropdown menu and the problem is in the position that the menus appear . AS you can see , Shop menu is in its own position but the services menu appears just in the same position as the shop menu was before. I'm new to front-end web development so anyone can help me to fix this please?
*{
margin: auto;
}
a{
text-decoration: none;
}
header{
display: flex;
direction: ltr;
background-color: gold;
padding: 15px;
}
.primaryHeaderMenu ul li ul{
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
.primaryHeaderMenu ul li ul li{
padding-bottom: 10px;
}
.primaryHeaderMenu ul li:hover ul{
display: block;
}
.primaryItems{
display: inline;
padding-left: 30px;
}
.primaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.secondaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.primaryHeaderMenu{
flex-grow: 1;
}
.secondaryHeaderMenu li{
display: inline;
padding-left: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Irancell</title>
</head>
<body>
<header>
<div class="irancellLogo">
<a href="#">
<img src="/iracell_logo.png" alt="Irancell" width="60px" height="60px">
</a>
</div>
<div class="primaryHeaderMenu">
<ul>
<li class="primaryItems">Shop
<ul>
<li>ُSimcards</li>
<li>Packages</li>
<li>Devices</li>
<li>Methods</li>
</ul>
</li>
<li class="primaryItems">Services
<ul>
<li>HighSpeed Net</li>
<li>Applications</li>
<li>Conversation</li>
<li>Messaging</li>
<li>Entertainment</li>
</ul>
</li>
<li class="primaryItems">Festivals</li>
<li class="primaryItems">Support</li>
<li class="primaryItems">About Us</li>
<li class="primaryItems">Cooperation</li>
</ul>
</div>
<div class="secondaryHeaderMenu">
<ul>
<li>
<img src="/search.png" alt="Search">
</li>
<li>
Login
</li>
<li>
Register
</li>
</ul>
</div>
</header>
</body>
</html>
Add position: relative; to .primaryItems class. Then add left: 0; to your .primaryHeaderMenu ul li ul class. The issue is position: absolute; is hoisting it's self up to the first relative positioned element in the HTML DOM, then they overlap each other since they have the same parent with the same position. There are interactive examples of this on W3Cschools.
I hope the following is useful for you.
Try replacing
.primaryItems {
display: inline;
margin-left: 30px;
}
with
.primaryItems {
display: inline;
margin-left: 30px;
position: relative; // New Line
}
and
try replacing
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
with
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
left: 0; // New Line
}
Example here: https://codepen.io/yasgo/pen/BaLNvBN
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>
Having trouble making the nav bar responsive. Due to the desired design I used two ul's with an image in between. This causes the breakpoints to happen at a large size because of the li padding. I would like to move the logo to the left and add a dropdown button to display the navbar options, along with removing the topbar at a mobile display width. Any help would be much appreciated, Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
GIVE $10, GET $10
FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li>BOB'S CREAM</li>
<li>SCALISI SKINCARE</li>
<li>TINTED</li>
</ul>
<img src="assets/logo.PNG" alt="SCALISI">
<ul class="secondNavSection">
<li>REVIEW</li>
<li>ABOUT</li>
<li>BLOG</li>
<li><i class="fa fa-search fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
Maybe you should follow the Bootstrap's boilerplate and don't forget to add it's resources.