I'm trying to write a navigation bar for a website in HTML and CSS. I have an image of the twitter icon that I would like on the right side. I have tried using float:right on the image and its containing tag. Can anyone tell me how I could do this? Here is my code:
body {
margin: 0;
padding: 0;
font-family: "Arial";
}
header {
height: 60px;
width: 100%;
}
.nav {
display: flex;
height: 60px;
width: 100%;
vertical-align: middle;
box-shadow: 0 0 0 2px #C3C3C3;
position: absolute;
}
img.logo {
height: 50px;
width: 50px;
margin: 0 20px;
}
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFF;
}
li a {
display: block;
color: white;
text-align: center;
padding: 21px 16px;
margin: 0 10px;
text-decoration: none;
color: #7D848E
}
li a:hover {
background-color: #111;
}
img.twitter {
height: 40px;
width: 40px;
margin: 10px 10px;
}
a.twitter {
display: block;
float: right;
}
<body>
<div class="nav">
<a href="#">
<img class="logo" src="/static/arch.png">
</a>
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
<a class="twitter" href="http://www.twitter.com">
<img class="twitter" src="/static/twitter.png">
</a>
</div>
</body>
You can align flex items with auto margins similarly to how you align block level elements with a defined width. In this case, you just want to give the twitter link margin-left: auto and the free space will occupy that auto margin. You can read more about auto margins with flex layouts in the spec here - https://www.w3.org/TR/css-flexbox-1/#auto-margins
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
body {
margin: 0;
padding: 0;
font-family: "Arial";
}
header {
height: 60px;
width: 100%;
}
.nav {
display: flex;
height: 60px;
width: 100%;
vertical-align: middle;
box-shadow: 0 0 0 2px #C3C3C3;
position: absolute;
}
img.logo {
height: 50px;
width: 50px;
margin: 0 20px;
}
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFF;
}
li a {
display: block;
color: white;
text-align: center;
padding: 21px 16px;
margin: 0 10px;
text-decoration: none;
color: #7D848E
}
li a:hover {
background-color: #111;
}
img.twitter {
height: 40px;
width: 40px;
margin: 10px 10px;
}
a.twitter {
margin-left: auto;
}
<body>
<div class="nav">
<a href="#">
<img class="logo" src="/static/arch.png">
</a>
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
<a class="twitter" href="http://www.twitter.com">
<img class="twitter" src="/static/twitter.png">
</a>
</div>
</body>
Your problem is that the container is using display: flex, so the float: right is being ignored. The solution is easy: remove the float: right from the <a> tag and add flex-grow: 10 to make it use all the unused space, and then move the img to the right with float: right. But that causes that the "clickable" zone of the logo is bigger than the image, which you can solve it adding the image and the link are within a div:
body {
margin: 0;
padding: 0;
font-family: "Arial";
}
header {
height: 60px;
width: 100%;
}
.nav {
display: flex;
height: 60px;
width: 100%;
vertical-align: middle;
box-shadow: 0 0 0 2px #C3C3C3;
position: absolute;
}
img.logo {
height: 50px;
width: 50px;
margin: 0 20px;
}
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFF;
}
li a {
display: block;
color: white;
text-align: center;
padding: 21px 16px;
margin: 0 10px;
text-decoration: none;
color: #7D848E
}
li a:hover {
background-color: #111;
}
img.twitter {
height: 40px;
width: 40px;
margin: 10px 10px;
float: right;
}
div.twitter {
display: block;
flex-grow: 10;
}
<body>
<div class="nav">
<a href="#">
<img class="logo" src="/static/arch.png">
</a>
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
<div class="twitter">
<a href="http://www.twitter.com">
<img class="twitter" src="/static/twitter.png">
</a>
</div>
</div>
</body>
Related
Tried to vertically align my nav menu with my logo image but with the code I have the navbar doesn't even seem to be within the container element. Any specific error or is it multiple things?
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
You needed to add a display: inline-block to your header .container .nav-logo
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
width: 737.667px;
float: right;
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="site_logo.png" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
Just add a new css rule display: inline; for .nav-logo{};
Working codepen: https://codepen.io/Omi236/pen/YQdKZY
Whether or not it's the best practice, you can simply add float: left; to header .container .nav-logo
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
float: left;
}
https://jsfiddle.net/vu8y4uxa/
Or as suggested elsewhere use display: inline-block;
You can try this code :
/* Body styles */
body {
background-color: white;
margin: 0px;
width: 100%;
min-width: 1000px;
max-width: 1400px;
}
/* Header styles */
header {
background-color: white;
min-height: 140px;
height: 160px;
}
header img {
display: inline-block;
clear: left;
margin: 0;
}
/* Navigation list styles */
header .container {
margin: auto;
width: 1140px;
min-height: inherit;
height: inherit;
}
header .container .nav-logo {
min-height: inherit;
height: inherit;
width: 188px;
padding-top: 35px;
display: inline-block;//Add this
}
li {
list-style: none;
}
nav.nav-right {
min-width: 737.667px;
/*width: 737.667px;*///Remove this
/*float: right;*///Remove this
}
.nav-right ul {
display: inline-block;
margin-left: 40px;
padding: 0px;
vertical-align: top;
}
.nav-right li {
display: inline;
text-transform: uppercase;
font-family: sans-serif;
}
.nav-right li a {
display: inline-block;
color: black;
text-decoration: none;
padding: 5px 10px;
}
.nav-right li a:hover {
outline: 1px black solid;
margin: 0px;
}
<header>
<div class="container">
<nav class="nav-right">
<div class="nav-logo"><!--Move this-->
<img src="site_logo.png" alt="Site Logo" />
</div>
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li><a href=# alt="our
story">Our Story</a></li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
An option is to use flexbox, which will also save you some CSS coding. For browser compatibility please check here. The code suggested doesn't give any issues from IE11 onwards.
.container {
display: flex;
align-items: center;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
ul li {
padding: 1em;
text-transform: uppercase;
font-family: sans-serif;
}
ul li a {
text-decoration: none;
color: black;
}
<header>
<div class="container">
<div class="nav-logo">
<img src="http://placehold.it/100&text=LOGO" alt="Site Logo" />
</div>
<nav class="nav-right">
<ul>
<li>Menu</li>
<li>Locations</li>
<li>Nutrition</li>
<li>Our Story</li>
<li>Rewards</li>
</ul>
</nav>
</div>
</header>
It's not hard, you use float: right; for nav-right but you forgot to use float: left; for nav-logo class. This will fix it!
I am not sure but you can try inserting your image source line nav-right class,
as i don't see the css code for nav-logo class, else write the code for nav-logo class
.nav-logo {
display: inline-block;
vertical-align: right;
max-width:100%; // or your desired size
}
I have an unordered list that contains several list elements inside. Also inside is an image element which is to be centered. I tried to center it using the margin: auto; property but since there are list elements on the side, it takes that into account when centering itself. How do I center the image in respect to it's container?
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;
margin: auto;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You may have to position the image absolute into the nav element using:
position: absolute;
left: 50%;
transform: translateX(-50%);
Also position:relative the nav element.
This way the image ignores whatever is inside the nav element.
body{
margin:0px;
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position:relative;
}
.nav li {
vertical-align: top;
margin: 5px 10px;
display: inline;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You can use display:inline-block to get it.
.nav img {
display: inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
height: 21px;
width: 24px;
}
.nav li {
display:inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
margin: 5px 10px;
}
.nav {
text-align:center; /*Add this*/
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
text-align:center;
}
.nav li {
display:inline-block;
vertical-align: middle;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
vertical-align: middle;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://lorempixel.com/200/200/" alt="Twitter Icon">
</ul>
</nav>
1) All Elements be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;<------Remove
display: inline-block;<-----------Add
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;<---------Change to margin-left: 0px;------
}
.nav img {
display: block;<----------Change to display: inline-block;---
margin: auto;<---------Remove
height: 21px;
width: 24px;
}
.clearfix{<-----------Add this Selector
text-align: center;
width: 100%;
padding-left: 0;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 0px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
}
.clearfix{
text-align: center;
width: 100%;
padding-left: 0;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
2) Just image be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;<---------Add
}
.nav li {
float: left;<---------remove
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;<-------Change To display: inline-block;---
margin: auto;<----------remove---------
right: 0;<--------------Add
position: absolute;<-------------Add
height: 21px;
width: 24px;
}
.clearfix { <----------------Add
width: 50%;
padding-left: 0;
position: relative;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
right: 0;
position: absolute;
}
.clearfix {
width: 50%;
padding-left: 0;
position: relative;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
Put your img element into li and do some changes in your css like below snippet:
.nav ul {
width: 800px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
padding: 0;
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
vertical-align: middle;
margin: 5px 10px;
}
.nav img {
display: block;
margin: auto;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
<!--html-->
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<li><img src="//login.create.net/images/icons/user/twitter_30x30.png" alt="Twitter Icon"></li>
</ul>
</nav>
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.
https://jsfiddle.net/qnw7a9zk/
I'm attempting to put the nav bar in the center, and the social media icons on the side. I've looked up other solutions to this problem, but none also want to put the icons on the side.
If I try to float the nav bar to the left, and the icons to the right, it kind of works, but the nav bar isn't in the center, and if I were to change the size of the window (responsiveness) the bar kind of breaks.
I can only get the icons to the right, but not on the same row as the nav bar, and they are stuck below it.
<div class="wrapper">
<img class="logo" src="Logo.png" />
<nav>
<ul class="nav">
<li class="navlist">Properties</li>
<li class="navlist">The Team</li>
<li class="navlist">Contact Us</li>
</ul>
<div class="imgs">
<img src="Instagram.png" />
<img src="Facebook.png" />
<img src="Twitter.png" />
</div>
</nav>
</div>
<footer>
<p class="buttons">Real estate</p>
</footer>
</body>
body {
background-color: #ffffff;
margin: 0;
display: table;
height: 100%;
width: 100%;
background-image: url(nice.jpg);
background-size: 100% 100%;
overflow: auto;
}
.wrapper {
text-align: center;
padding: 0px;
height: auto;
width: 100%;
}
footer {
background-color: #cbb492;
display: table-row;
height: 2px;
text-align: center;
}
li a {
text-decoration: none;
font-variant: small-caps;
color: black;
}
li:hover {
background-color: #cbb492;
}
nav {
width: 100%;
position: absolute;
top: 0px;
padding-bottom: 2px;
padding-top: 2px;
background-color: whitesmoke;
}
.logo {
height: 28px;
width: 90px;
padding-top: 50px;
}
p {
color: white;
font-size: 6px;
text-align: left;
padding-left: 20px;
}
.navlist {
display: inline;
padding-left: 30px;
margin-left: 10px;
margin-right: 10px;
padding-right: 30px;
padding-top: 3px;
padding-bottom: 2.4px;
}
.nav {
list-style: none;
padding: 0;
width: 100%;
margin: 0;
top: 0px;
}
.imgs {
list-style: none;
margin: 0;
display: block;
padding-left: 0px;
float: right;
width: 30%;
}
.imgs img {
width: 9%;
height: 9%;
}
You should try to move the .imgs-div one level higher. Than it should be easier. One approach could be the flexbox model. So the wrapper-container gets
display: flex;
flex-direction: row;
justify-content: space-between;
I just did some more edits. Is this what you wanted to achive?
https://jsfiddle.net/qnw7a9zk/6/
You have given width:100% to .nav so it is taking full width and pushes images down. Keep the width ratio maintained in navigation and image. Like 80% navidation and 20 % images, see fiddle
https://jsfiddle.net/qnw7a9zk/5/
You may do it by display: inline-block
body {
background-color: #ffffff;
margin: 0;
display: table;
height: 100%;
width: 100%;
background-image: url(nice.jpg);
background-size: 100% 100%;
overflow: auto;
}
.wrapper {
text-align: center;
padding: 0px;
height: auto;
width: 100%;
}
footer {
background-color: #cbb492;
display: table-row;
height: 2px;
text-align: center;
}
li a {
text-decoration: none;
font-variant: small-caps;
color: black;
}
li:hover {
background-color: #cbb492;
}
nav {
padding-bottom: 2px;
padding-top: 2px;
background-color: whitesmoke;
text-align: center
}
.logo {
height: 28px;
width: 90px;
}
p {
color: white;
font-size: 6px;
text-align: left;
padding-left: 20px;
}
.navlist {
display: inline;
padding-left: 30px;
margin-left: 10px;
margin-right: 10px;
padding-right: 30px;
padding-top: 3px;
padding-bottom: 2.4px;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
.imgs {
list-style: none;
margin: 0;
display: inline-block;
padding-left: 0;
}
<div class="wrapper">
<nav>
<ul class="nav">
<li class="navlist">Properties</li>
<li class="navlist">The Team</li>
<li class="navlist">Contact Us</li>
</ul>
<div class="imgs">
<img src="Instagram.png" />
<img src="Facebook.png" />
<img src="Twitter.png" />
</div>
</nav>
<img class="logo" src="Logo.png" />
</div>
<footer>
<p class="buttons">Real estate</p>
</footer>
</body>
I have been trying to vertical align links in a list, where all but one of the links has background color/border (to look like a button).
Even though the code on this fiddle works, it doesn't respect the reduced height of that link (the Sign In link).
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
a.button {
height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}
<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>
<a class="button" href="#" style="height: 60px;">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>
JSFiddle link: http://jsfiddle.net/6er3aguk/
What I would like to achieve is basically to have some sort of top/bottom margin on that Sign In link, so it doesn't stick to the top and bottom of the surrounding div.
Any ideas on how I can achieve that?
This is how I would create the effect that you're looking for.
This will vertically center the links, clear the parent properly. And irregardless of the browsers font-setting, at it's minimum width it will stop contracting with 15px of spacing between each element and the sides of the container if the window is smaller than the nav, instead of overlapping or moving to new lines.
This also completely avoids the use of floats and display: table hacks.
JSFiddle
*, *:before, *:after {
box-sizing: border-box;
}
html body, ul, div, li, a {
padding: 0;
margin: 0;
}
.left, .right {
position: absolute;
top: 0; bottom: 0;
white-space: nowrap;
}
.left {
position: absolute;
left: 15px;
}
.right {
text-align: right;
position: absolute;
left: 172.5px;
right: 0;
}
.inner {
position: relative;
height: 75px;
background-color: grey;
}
ul {
height: 100%;
font-size: 0;
}
ul:before {
content: " ";
height: 100%;
}
ul:before,
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
font-size: 12pt;
display: block;
vertical-align: middle;
color: white;
text-decoration: none;
font-weight: normal;
padding: 10px 7.5px;
}
.right li:last-child {
padding-left: 7.5px;
padding-right: 15px;
}
.right a {
border-radius: 3px;
}
.right a:hover {
background: #888;
}
.icon-user:before {
content:"\e745";
}
a.button {
background: #f38060;
color: white;
padding: 10px 15px;
}
a.button:hover {
background: #f98666;
}
a.logo {
background-image: url(//placehold.it/150x20);
background-size: 150px 20px;
height: 20px;
width: 150px;
padding: 0px;
}
<div class="inner">
<ul class="left">
<li><a class="logo" href="/"></a></li>
</ul>
<div class="right">
<a class="mobile-menu" href="#">
<span class="icon-menu"></span>
</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>
<a class="button" href="#">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>
You can achieve the preferred style by putting the Sign In text and the span inside a div and applying the same styles you did for a.button to that div.
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
#signin {
max-height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}
<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>
<a class="button" href="#" style="
height: 60px;
">
<div id="signin">Sign In<span class="icon-user"></span>
</div>
</a>
</li>
</ul>
</div>
</div>