I'm have a ul in a div (left-nav-bar). I'm trying to get the ul to span across the whole div when the user hovers over it, but there is whitespace generated before each li and I'm not sure why.
I've tried:
.nav-container ul{
width: 100%;
}
Which allows the ul to extend beyond the text, but doesn't address the whitespace.
Here is a fiddle: https://jsfiddle.net/ytynqhmj/
ul elements have a left padding by default.
Add padding: 0; or padding-left: 0; to .nav-container ul to avoid this
https://jsfiddle.net/ejzL9zo9/
By default ul element take padding-left: 60px; just update it with 0px to resolve this issue. Check updated snippet below..
html,
body {
height: 100%;
background-color: #333;
}
body {
background-color: #333;
text-align: center;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
display: block;
}
/** CONTAINER DIVS **/
.site-wrapper {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
overflow: auto;
}
.logo-holder {
height: 150px;
text-align: center;
border: 1px solid black;
}
.logo-holder h3 {
line-height: 150px;
}
.nav-container {
width: 300px;
float: left;
background-color: #fff;
height: 100%;
}
.nav-container a {
text-align: left;
padding: 5px;
color: #333;
}
.nav-container ul {
width: 100%;
padding: 0px;
}
.nav-container ul li {
list-style-type: none;
width: 100%;
}
.nav-container li:hover {
background-color: #333;
}
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="nav-container">
<div class="logo-holder">
<h3>Logo</h3></div>
<nav class="nav left-nav-bar">
<ul>
<li><a class="nav-link active" href="">Home</a></li>
<li><a class="nav-link" href="">Blog</a></li>
<li><a class="nav-link" href="">Store</a></li>
<li><a class="nav-link" href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
Just remove default left padding for ul like this:
.nav-container ul{
padding-left:0;<----Added
//more code....
}
Demo
Related
I am trying to create a dynamic nav bar. By default, I want the nav bar to display vertically in a div which spans the entire height of the page, but when resized, I want the bar to become horizontal. Here's a picture of what I am trying to achieve:
I have tried to mould my approach based off W3Schools suggestions, by adding display:block; to my ul but it doesn't change anything. My understanding of media queries isn't the best, but I have also tried to alter the width and height of the left div (dark grey):
#media screen and (max-width: 200px) {
.nav-container{
width: 100%;
height: 200px;
background-color: #333;
border-bottom: 0.5px solid #333;
}
}
What is the best approach to achieve this?
Edit:
html,
body {
height: 100%;
background-color: #fff;
}
body {
background-color: #fff;
text-align: center;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
display: block;
}
.site-wrapper {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
* {
margin: 0;
padding: 0;
}
.site-wrapper {
display: flex;
flex-wrap: wrap;
}
.nav-container {
height: 100%;
width: 200px;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.logo-holder {
position: absolute;
top: 0;
text-align: center;
}
.logo-holder img {
height: auto;
}
#navigation-div {
margin-top: -300px;
width: 100%;
}
.nav-ul li a {
display: block;
}
.nav-link {
width: 100%;
display: block;
text-align: left;
color: #fff;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #fff;
color: #333;
}
.nav ul {
width: 100%;
padding-left: 0px;
}
.nav ul li {
list-style-type: none;
width: 100%;
}
.nav ul li a {
text-align: left;
padding: 5px;
color: #fff;
text-decoration: none;
margin-left: 15px;
}
.nav li:hover {
background-color: #fff;
}
.nav li:hover a {
color: #333;
}
#media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 160px;
background-color: #333;
border-bottom: 0.5px solid #333;
}
.nav-container nav,
.nav-container nav ul,
.nav-container nav ul li,
.logo-holder {
display: inline;
}
.logo-holder {
position: absolute;
left: 0;
}
#navigation-div {
float: left;
}
}
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img src="#" alt="Logo" />
</div>
<div id="navigation-div">
<nav class="nav left-nav-bar">
<ul class="nav-ul">
<a class="nav-link active" href="">
<li>Home</li>
</a>
<a class="nav-link" href="">
<li>Blog</li>
</a>
<a class="nav-link" href="">
<li>Store</li>
</a>
<a class="nav-link" href="">
<li>Contact</li>
</a>
</ul>
</nav>
</div>
</div>
</div>
Firstly, your media query might not be called at all because the max width is pretty small at 200px.
Inside your media query you'll need to set the display property of the navigation elements and the logo to inline, so that they display side-by-side. (You could also consider using flexbox for this) You'll also need to reset some of the properties that are defined higher up, like the line-height of the h3 logo element.
#media screen and (max-width: 480px) {
.nav-container{
width: 100%;
height: auto;
background-color: #333;
border-bottom: 0.5px solid #333;
}
.nav-container nav,
.nav-container nav ul,
.nav-container nav ul li,
.logo-holder,
.logo-holder h3 {
display: inline;
}
.logo-holder h3 {
line-height: 1;
}
}
I'm trying to reduce the height of my navigation bar. when I use min-height property, it adds a scrollbar to the navigation bar which makes it not so appealing. I would like to align the logo to the extreme left and the rest of the contents to the extreme right.I have attached the code below. Please help me to fix it.
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
text-align: right;
top: 0;
margin: 0 auto;
right: 0;
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoraton: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
your logo and below that your menu list - that's the problem
make its side by side
.navigation ul {
display: flex;
}
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
/*text-align: left;*/
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.navigation ul {
display: flex; /* new line added */
}
#logo {
flex: 2; /* new line added */
}
.log {
/*text-align: right;*/
top: 0;
margin: 0 auto;
right: 0;
display: flex; /* new line added */
flex: 8; /* new line added */
justify-content: flex-end; /* new line added */
}
ul {
padding: 0;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 16px 20px;
text-transform: uppercase;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0,0,0,0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
You had the scroll bar because the contents were too big and you had overflow-y: auto; Overflow controls the behavior when the contents are too big for the parent div size.
The float property can be used to move elements to different sides of the viewer in a consistent manner.
Your code is still not responsive and will not display correctly on screens smaller that 365px wide. The support range will get smaller if you add more menu items.
There are a lot of resources you can check out for making a responsive menu
Is this what you wanted?
body {
margin: 0 auto;
padding: 0
}
.navigation {
background-color: rgba(15, 58, 114, 0.9);
position: fixed;
height: 60px;
line-height: 60px; /* needs to be the same height as your navigation div */
top: 0;
width: 100%;
z-index: 10000;
}
.log {
float: right; /* pulls the div to the right side */
}
ul {
padding: 0;
margin: 0 auto;
}
li {
color: White;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 0 auto;
text-transform: uppercase;
}
li a {
color: White;
text-align: Center;
padding: 0 10px;
text-decoration: none;
}
li a:hover {
color:wheat;
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 10px;
float: left; /* pulls the div to the left side */
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
made Changes to your HTML and CSS
div with class log is a block level element, means it occupies 100% width of the page, make them display:inline-block and float it to right, make the logo wrap in a div and float it to left. since we are having two float elements navigation bar height gets collapsed to avoid it we need to add clearfix
HTML
<div class="navigation clearfix">
<div class="logo">LOGO</div>
<div class="menu">
<ul>
<li>LOGIN</li>
<li>JOIN WITH US</li>
</ul>
</div>
</div>
CSS
.navigation {
background-color: rgba(15,58,114,0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.logo{
float:left;
display:inline-block;
}
.logo a{
padding:8px 2px;
color:#fff;
display:block;
}
.menu{
float:right;
}
.clearfix::after{
content:"";
display:table;
width:100%;
}
.menu ul{
padding:0px;
list-style-type:none;
margin:0;
}
.menu ul li{
display:inline-block;
}
.menu ul li a{
color:#fff;
padding:8px 2px;
display:block;
}
Link For reference
style accordingly
hope this helps..
I've done a little change in the style:
.navigation {
background-color: rgba(15, 58, 114, 0.9);
overflow-y: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
text-align: left;
width: 100%;
z-index: 10000;
box-sizing: border-box;
}
.log {
margin: 0 auto;
float: right;
}
ul {
padding: 0;
}
li {
color: White;
list-style: none;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
float: right;
}
li a {
display: inline-block;
color: White;
text-align: Center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgba(0, 0, 0, 0);
}
#logo {
color: #FFFFFF;
font-family: 'Vollkorn';
font-size: 34px;
padding: 0px 50px;
text-align: center;
float: left !important;
margin-top: -10px;
}
<div class="navigation">
<ul>
<li id="logo">LOGO</li>
<div class="log">
<li>LOGIN</li>
<li>JOIN WITH US</li>
</div>
</ul>
</div>
How am I able to center the photo with the text, without minimizing the photo itself?
I've tried; max-height: xx, but that wasn't it.
The photo is centered in height, but not the text. How's this possible?
http://jsfiddle.net/gLpqoamn/
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre" style="float:right;">Donate</li>
</ul>
</div>
</header>
</body>
I would use flex on the ul, then you can use align-items to vertically center or position the children. A margin-left: auto on the last link will push it to the right, then you can move the background color to the link to keep it from stretching the height of the parent
.hoyre {
margin-left: auto;
background-color: #f19f00;
min-height: 100%;
align-self: stretch;
display: flex;
align-items: center;
}
.hoyre:hover {
background-color: #d98500;
}
header {
background-color: white;
}
.logo {
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
display: flex;
align-items: center;
}
li {}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li>
<img src="http://i.imgur.com/QAEzQxp.png" class="logo">
</li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre">Donate</li>
</ul>
</div>
</header>
</body>
For using height:100% in your css you should define parent element height first. then you change li element to behave like table and fill 100% height.
Update your styles like this(new styles have comment in front of them):
li {
float: left;
height: 100%; /*fill height */
display: table; /* behave as table*/
}
li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}
I'm trying to get the headerLinks div to wrap around both headerLink divs so that I can move the links and edit the margins of the links as a whole. Is this the best way to do it? And if so, how would I fix my code? Thank you in advance.
This is my code:
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}
#headerItems {
list-style-type: none;
overflow: hidden;
margin: 10px;
padding: 0px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
.headerLinks {
display: inline-block;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: right;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<ul id="headerItems">
<li id="headerName">My name</li>
<div id="headerLinks">
<li class="headerLink">Link 1
</li>
<li class="headerLink">Link 2
</li>
</div>
</ul>
</div>
Only the links on the right should be in a ul.
And I'm pretty sure you don't want the links reversing the order,
So you will need to add float:right on the parent (headerLinks), and float left on the lis
* {box-sizing: border-box;}
body {margin: 0;}
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
padding: 10px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
#headerLinks {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: left;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<span id="headerName">My name</span>
<ul id="headerLinks">
<li class="headerLink">Link 1</li>
<li class="headerLink">Link 2</li>
</ul>
</div>
If you want to make a dropdown menu, you will nest another ul inside the li
I want all the elements in my header to be in a horizontal line in line with each other. I also want them to be centered on the Grey header block. Here is what it looks like so far.enter image description here This is my first website so I'm just playing around at the moment so I would appreciate any help or advice.
*
====================================
HEADER
====================================
*/
header {
background-color: grey;
opacity: 50%;
width: 100%;
}
#logo {
float: left;
padding-top: 10px;
padding-left: 30px;
}
#logo img {
width: 15%;
height: 15%;
}
#navigation {
margin: auto;
clear: both;
text-align: center;
position: relative;
}
#navigation li {
display: inline-block;
padding: 5px 15px 5px 15px;
color: #fff;
}
#navigation li a {
color: #fff;
text-transform: uppercase;
}
nav a.selected, nav a:hover {
border-bottom: 1px solid #fff;
padding-bottom: 0.75px;
}
.social-media {
text-align: right;
padding: 0 1.5em 0 0;
}
.social-media ul li {
display: inline;
}
.social-media img {
width: 30px;
height: 30px;
margin: 0 4px;
}
<header>
<div id="logo">
<img src="img/logo.png">
</div>
<nav id="main-controls">
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="social-media">
<img src="img/facebook.png" alt="Facebook">
<img src="img/twitter.png" alt="Twitter">
<img src="img/instagram.png" alt="Instagram">
<img src="img/google+.png" alt="Google Plus">
<img src="img/linkedin.png" alt="Linked In">
</div>
</nav>
</header>
An updated version of your CSS:
*
====================================
HEADER
====================================
*/
header {
background-color: grey;
opacity: 50%;
width: 100%;
}
#logo {
display: inline-block;
padding-top: 10px;
padding-left: 30px;
}
#logo img {
width: 15%;
height: 15%;
}
#navigation {
display: inline-block;
margin: auto;
clear: both;
text-align: center;
position: relative;
}
#navigation li {
display: inline-block;
padding: 5px 15px 5px 15px;
color: #fff;
}
#navigation li a {
color: #fff;
text-transform: uppercase;
}
nav a.selected, nav a:hover {
border-bottom: 1px solid #fff;
padding-bottom: 0.75px;
}
.social-media {
display: inline-block;
text-align: right;
padding: 0 1.5em 0 0;
}
.social-media ul li {
display: inline-block;
}
.social-media img {
width: 30px;
height: 30px;
margin: 0 4px;
}
This should take care of aligning all elements horizontally. I removed a float property declared, and used display: inline-block instead on all stacked elements.