I have written some code in CSS and HTML but float is not working. I want the site name and logo at left side and menu or nav at the right side of the navbar.
https://codepen.io/asfafasa/pen/NWWWzgd
Html:
<body>
<div class="page-wrapper">
<header>
<div class="banner-home">
<h1>
<div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
<span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
</a>
</div>
</h1>
<div id="open">
<a href="#" onClick="openMenu()">
<i class="fas fa-ice-cream"></i>
</a>
</div>
<nav>
<div class="menu">
<div class="button">
<ul>
<!--<a href="#" onClick="closeMenu()">
<i class="fas fa-times">
</i>
</a>-->
<li>
<div class="homePage_re rd_button">
<a href="index.html" class="navigation_home">
Home
</a></div>
</li>
<li>
<div class="crazyGallary rd_button">
<a href="gallary.html">
Gallay
</a></div>
</li>
<li>
<div class="aboutUs rd_button">
<a href="aboutUs.html">
About Us
</a></div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="space"></div>
CSS:
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
div{
display: block;
}
body{
margin: 0;
font-size: 14px;
}
.space{
height: 50px;
}
.page-wrapper{
padding: 0 50px;
}
header{
background: darkgrey;
height: 120px;
color: azure;
z-index: 1;
margin: 0 auto;
padding: 5px 0;
text-align: center;
display: block;
}
header *{
display: inline-block;
}
.banner-home{
align-items: center;
overflow: auto;
}
.homepage{
padding-left: 20px;
float: left;
}
.menu{
display: inline-block;
float: right;
}
.rd_button a{
text-decoration: none;
display: block;
}
.rd_button{
list-style-type: none;
display: block;
}
.button a{
color: #fff;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0 0 0 50px;
font-size: 14px;
z-index: 1;
}
.button{
float: right;
}
.button a:hover{
background-color: tomato;
color: #fff;
}
.button a:hover:after{
transform: translateY(-50%) rotate(-35deg);
}
nav{
margin: 0 auto;
text-align: right;
float: right;
}
.logo{
display: inline;
height: 100%;
}
.banner-home h1 a{
text-decoration: none;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
}
main{
text-align: center;
}
The menu items should be on the right side of the bar while the logo and site name should be on the left side.
2 things:
.banner-home should have the float:left property
.banner-home div was not closed properly
Updated pen: https://codepen.io/david-somekh/pen/yLLLEEK
<body>
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
div{
display: block;
}
body{
margin: 0;
font-size: 14px;
}
.space{
height: 50px;
}
.page-wrapper{
padding: 0 50px;
}
header{
background: darkgrey;
height: 120px;
color: azure;
z-index: 1;
margin: 0 auto;
padding: 5px 0;
text-align: center;
display: block;
}
header *{
display: inline-block;
}
.banner-home{
float:left;
align-items: center;
overflow: auto;
}
.homepage{
padding-left: 20px;
float: left;
}
.menu{
display: inline-block;
float: right;
}
.rd_button a{
text-decoration: none;
display: block;
}
.rd_button{
list-style-type: none;
display: block;
}
.button a{
color: #fff;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0 0 0 50px;
font-size: 14px;
z-index: 1;
}
.button{
float: right;
}
.button a:hover{
background-color: tomato;
color: #fff;
}
.button a:hover:after{
transform: translateY(-50%) rotate(-35deg);
}
nav{
margin: 0 auto;
text-align: right;
float: right;
}
.logo{
display: inline;
height: 100%;
}
.banner-home h1 a{
text-decoration: none;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
}
main{
text-align: center;
}
</style>
<div class="page-wrapper">
<header>
<div class="banner-home">
<h1>
<div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
<span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
</a>
</div></div>
</h1>
<div id="open">
<a href="#" onClick="openMenu()">
<i class="fas fa-ice-cream"></i>
</a>
</div>
<nav>
<div class="menu">
<div class="button">
<ul>
<!--<a href="#" onClick="closeMenu()">
<i class="fas fa-times">
</i>
</a>-->
<li>
<div class="homePage_re rd_button">
<a href="index.html" class="navigation_home">
Home
</a></div>
</li>
<li>
<div class="crazyGallary rd_button">
<a href="gallary.html">
Gallay
</a></div>
</li>
<li>
<div class="aboutUs rd_button">
<a href="aboutUs.html">
About Us
</a></div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="space"></div>
Related
I want to create a webpage like this.So far I have written a code in html and css like this but I cannot align the top nav bar above the nav-menu items?
HTML
<body>
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:enquiry#domain.com</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li>about us</li>
<li>services</li>
<li>news</li>
<li>request a quote</li>
<li>contact us</li>
<li>track your item</li>
</ul>
</div>
</body>
CSS
-------------------------------------------------------------------------------------------------------
.nav__nav-bar {
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
color: black;
font-weight: bold;
margin-top: -102px;
margin-left: 184px;
}
.nav__nav-bar li {
float: left;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:black;
font-weight:bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background-color: yellow;
}
.top-bar__content{
display:inline-block;
}
.top-header {
border:2px solid black;
background-color: black;
}
.header {
background-color: #fff;
height: 80px;
width: 90%;
}
.logo {
padding: 17px;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}
.top-bar {
border: 2px solid red;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 76%;
margin-left: 280px;
height: 52px;
margin-top: -100px;
}
.top-bar-content{
display:inline;
}
The top-nav bar is not getting aligned at the top.I tried using flex but it does not work properly. Also the menu items are not aligned properly.Can anyone help me regarding this issue?
Codepen
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="header-right">
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:enquiry#domain.com</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li>about us</li>
<li>services</li>
<li>news</li>
<li>request a quote</li>
<li>contact us</li>
<li>track your item</li>
</ul>
</div>
</div>
`.top-header {
border: 2px solid black;
background: black;
}
.header {
background: white;
height: 80px;
width: 100%;
display: flex;
}
.logo {
padding: 0 17px;
flex: 0 0 400px;
align-self: center;
}
.header-right {
flex: auto;
padding: 0 0 0 20px;
}
.top-bar {
background: #000000;
color: white;
padding: 8px 18px;
border-radius: 0 0 0 8px;
}
.nav__nav-bar {
margin: 0;
float: none;
list-style: none;
text-align: right;
display: flex;
padding: 0;
}
.top-bar__content {
display: flex;
}
.top-bar-content {
padding: 0 16px 0 0;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-weight: bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background: yellow;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}`
[https://codepen.io/kinjalpatel2207/pen/MWwapLz][1]
I've been going around the web trying to find an answer to how to center my navbar but none of the solution worked.
The code below will show what I have so far with both HTML and CSS.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
This is how it looks like right now:
I have also noticed that in CSS, when I did "float: center;" it had no difference with when I did "float: left;". But when I did "float: right;" it would shift to the right.
ul {
margin: 0 auto;
text-align: center;
}
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin: 0 auto;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have removed the below css from your code
header #smcontent {
float: left;
}
and added margin: 0 auto; text-align: center; to the ul
Try absolute position with float none, left 50% and a left translate of 50% to center your nav bar perfectly.
CSS: add
header .newCenter {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
HTML: add
<nav class="newCenter">
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
Float only applies to left and right. I added display: grid and justify-content: center to your header. I removed float: left; in header #smcontent.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
display: grid; //or flex
justify-content: center;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline;
padding: 0 20px;
}
header nav {
margin: 10px auto 0;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin: 0 auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
To align text horizontally center use text-align:center. In your to align nav bar content center just add text-align:center to header nav
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
In below code snippet I have added some images for demonstration purpose.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-may-26-2015twitter-260nw-281505518.jpg">
</a>
<a href="https://facebook.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-april-27-2015-260nw-278925056.jpg">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
I cannot get the text for navigation to display inline and in the grey bar at the top of the page. I am guessing there is some type of problem with my CSS. Before I had the text included with the class="box" and the formatting was working, but the buttons wouldn't work, so I created a new div class="new" so the buttons would work.
HTML:
<div class="box-contents">
<img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>
<div class="box">
</div>
<div class="new">
<nav>
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
padding: 0;
font-size: 100%;
}
.box {
width: auto;
height: 120px;
background: grey;
overflow: hidden;
opacity: 0.85;
position: relative;
z-index: 3;
}
.box-contents {
margin: auto;
width: 100%;
overflow: hidden;
position: absolute;
opacity: 1 !important;
z-index: 4;
}
.new ul{
font-family: 'Roboto Condensed', sans-serif;
font-weight: lighter;
letter-spacing: 2px;
font-size: 2em;
margin-top: 0;
padding-top: 25px;
float: right;
margin-right: 100px;
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
z-index: 99;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
float: left;
width: 150px;
margin: 10px 2%;
}
.images{
display: block;
width: 800px;
float: inherit;
margin: auto;
padding-bottom: 20px;
padding-top: 20px;
}
The picture below shows the formatting issues
The most appropriate approach is to contain your logo and navigation links within your <nav> element. Right now they're broken out into separate elements which will cause them to stack. Recently, flexbox has become the best solution for situations like this. You'll be flexing your nav container and the unordered list inside. The margin property on the ul has left set to auto, which will push the navigation items to the right.
I've removed all of the unnecessary elements since we really just need <nav>. Hopefully this helps. I've included only the relevant CSS to give you a better understanding of what is happening.
nav {
display: flex;
align-items: center;
background-color: grey;
}
nav ul {
display: flex;
margin: 0 0 0 auto;
list-style-type: none;
}
nav ul li {
padding-right: 10px;
}
<nav>
<img src="//placehold.it/150x50" alt="Stephen Crawford Photography Logo">
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
Add this css to your code and <div class="new"> //content </div> inside <div class="box"> </div> like so
.new ul li{
display: inline-block;
}
body{
margin: 0;
padding: 0;
font-size: 100%;
}
.box {
width: auto;
height: 120px;
background: grey;
overflow: hidden;
opacity: 0.85;
position: relative;
z-index: 3;
}
.box-contents {
margin: auto;
width: 100%;
overflow: hidden;
position: absolute;
opacity: 1 !important;
z-index: 4;
}
.new ul{
font-family: 'Roboto Condensed', sans-serif;
font-weight: lighter;
letter-spacing: 2px;
font-size: 2em;
margin-top: 0;
padding-top: 25px;
float: right;
margin-right: 100px;
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
z-index: 99;
}
.new ul li{
display: inline-block;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
float: left;
width: 150px;
margin: 10px 2%;
}
.images{
display: block;
width: 800px;
float: inherit;
margin: auto;
padding-bottom: 20px;
padding-top: 20px;
}
<body>
<div class="box-contents">
<img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>
<div class="box">
<div class="new">
<nav>
<ul>
<li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
<li class="button"><a class="button-text" href="../html/about.html">about</a></li>
<li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
</ul>
</nav>
</div>
</div>
<div>
<img class="images" src="../images/DSC_7997-Edit.jpg" alt="Trevi Fountain, Rome">
<img class="images" src="../images/DSC_1195.jpg" alt="Lake Hartwell">
<img class="images" src="../images/DSC_7564-Edit.jpg" alt="Cinque Terre">
<img class="images" src="../images/_DSC4277.jpg" alt="Park City">
<img class="images" src="../images/LAC_6060.jpg" alt="Toccoa Falls">
<img class="images" src="../images/DSC_7547-Edit.jpg" alt="Cinque Terre">
<img class="images" src="../images/_DSC8776.jpg" alt="Campfire">
<img class="images" src="../images/_DSC2203-Edit.jpg" alt="Milkyway">
<img class="images" src="../images/_DSC8094-Edit.jpg" alt="Lake Hartwell">
</div>
</body>
Put your div with class new in div with class box
<div class="box">
<div class="new">...</div>
</div>
and then change your css by replacing .new ul with .new li
.new li{
...
}
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.
I've been trying to figure out why my #logo doesn't behave as it should, having display: inline-block;, #logo and #main_nav should be on the same line, however it doesn't. Why is this and how can I fix it?
#logo {
margin: 5px;
background-repeat: no-repeat;
background-size: 350px;
width: 350px;
height: 100px;
background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png");
display: inline-block;
}
ul, li {
display: block !important;
}
li, ul {
display: inline-block;
}
#main_nav {
float: right;
display: inline-block;
margin: 10px;
}
.nav_button:link {
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-family: arial;
font-size: 16px;
margin: 10px;
padding-bottom: 2px;
position: relative;
color: black;
}
.nav_button:visited {
color: black;
}
<div id="logo"></div>
<div id="myNav" class="overlay">
<div id="main_nav" class="overlay-content">
<a class="nav_button" href="/">Home</a>
<!-- <a class="nav_button" href="">Blog</a>
<a class="nav_button" href="">Trips</a> -->
<a class="nav_button" href="/politics">Politics</a>
<!-- <a class="nav_button" href="">Pictures</a> -->
<a class="nav_button" href="/videos">Videos</a></li>
<!-- <a class="nav_button" href="">Computer</a></li> -->
</div> <!-- close main_nav -->
</div> <!-- close myNav-->
Your parent #myNav doesn't have apply any style, so the browser default would set the display to block. Hence make it wrap to another line. Make it inline-block to fix the problem.
#logo {
margin: 5px;
background-repeat: no-repeat;
background-size: 350px;
width: 350px;
height: 100px;
background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png");
display: inline-block;
}
ul {
display: block;
}
li, #myNav {
display: inline-block;
}
#main_nav {
float: right;
margin: 10px;
display: inline-block;
}
.nav_button:link {
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-family: arial;
font-size: 16px;
margin: 10px;
padding-bottom: 2px;
position: relative;
color: black;
}
.nav_button:visited {
color: black;
}
<div id="logo"></div>
<div id="myNav" class="overlay">
<div id="main_nav" class="overlay-content">
<ul>
<li><a class="nav_button" href="/">Home</a></li>
<li><a class="nav_button" href="/politics">Politics</a></li></ul>
</div> <!-- close main_nav -->
</div> <!-- close myNav-->
Add width to your nav container and align the text to center. The inline-block depends on the space, it will move to second line if there is not enough space.
#logo {
margin: 5px;
background-repeat: no-repeat;
background-size: 350px;
width: 350px;
height: 100px;
background-image: url("http://www.jeffarries.com/media/pictures/logos/jeff_cursive.png");
display: inline-block;
}
ul,
li {
display: block !important;
}
li,
ul {
display: inline-block;
}
#myNav {
float: right;
display: inline-block;
text-align: right;
vertical-align: top;
margin-top: 25px;
}
#main_nav {
width: 250px;
margin: 10px;
}
.nav_button:link {
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-family: arial;
font-size: 16px;
margin: 10px;
padding-bottom: 2px;
position: relative;
color: black;
}
.nav_button:visited {
color: black;
}
<a href="/">
<div id="logo"></div>
</a>
<div id="myNav" class="overlay">
<div id="main_nav" class="overlay-content">
<a class="nav_button" href="/">Home</a>
<!-- <a class="nav_button" href="">Blog</a>
<a class="nav_button" href="">Trips</a> -->
<a class="nav_button" href="/politics">Politics</a>
<!-- <a class="nav_button" href="">Pictures</a> -->
<a class="nav_button" href="/videos">Videos</a>
<!-- <a class="nav_button" href="">Computer</a></li> -->
</div>
<!-- close main_nav -->
<!-- close myNav-->