How do you make a navigation with five links, with one of the links being an image (the logo) which needs to be centered?
My HTML:
<nav>
<ul>
<span>
<li>Restaurants</li>
<li>About</li>
</span>
<li><img src="img/logo.svg" alt="Posthusets logo i hvid format" class="nav-logo"></li>
<span>
<li>TakeAway</li>
<li>Contact</li>
</span>
</ul>
</nav>
nav {
display: flex;
}
nav>* {
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
}
<nav>
<span>
Restaurants
About
</span>
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50">
<span>
TakeAway
Contact
</span>
</nav>
jsFiddle
You can use flex-grow on li elements
*{
padding: 0;
margin: 0;
}
ul{
width: 100%;
display: inline-flex;
flex-direction: row;
list-style-type: none;
}
li{
height: 50px;
line-height: 50px;
text-align: center;
flex-grow: 1;
}
https://jsfiddle.net/orzo8d2t/
(note that I removed span theree)
If anyone is still needing help, here's how I'd go about accomplishing this. This works better responsively because as the screen gets wider, the gaps in-between each navigation item does not increase, it stays consistent. (At mobile you can hide this menu and show your mobile menu).
HTML:
<div class="container">
<div class="navbar">
<ul>
<li>Restaurants</li>
<li>About</li>
<li><img width="200px" src="images/logo.png"/></li>
<li>TakeAway</li>
<li>Contact</li>
</ul>
</div>
CSS:
.container {
width: 100%;
}
.navbar {
width: 100%;
margin: 0 auto;
text-align: center;
background-color: #000;
padding-top: 30px;
padding-bottom: 30px;
}
.navbar li {
list-style: none;
display: inline-block;
margin-right: 45px;
color: #fff;
vertical-align: middle;
}
.navbar li:nth-child(5) {
margin-right: 0px;
}
Related
I have this HTML code:
<body>
<header id="masthead">
<div id="container">
<!-- logo -->
<img src="logo.png" alt="" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
And this CSS code:
.container {
width: 80%;
margin: 0 auto;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
header::after {
content : '';
display: table;
clear: both;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 2px;
position: relative;
padding-right: 0.1rem;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
However I want to make my nav bar to the left from the logo, but not down below. How can I do it using the given initial code that i hav pointed ? As you can see, align: right and align: left has been used, but had not helped me
Like on photo (Used arrows to point it )
Create two columns. In one column, place your logo, and in the second column, place your navigation bar.
<div class="row">
<div class="column" style="background-color:#aaa; width:20%;">
<!--pLACE Logo here--->
</div>
<div class="column" style="background-color:#bbb; width:80%">
<!--Place Navbar code here-->
</div>
</div>
Remember Adjust your css accordingly
Give your div with id container a display property of flex, direction property of row and then align or justify items as per your liking
#container{
display:flex;
flex-direction:row;
justify-content:space-between;
}
Also in your HTML code you've given tags ids but you're using class selectors in your CSS
Some resources that'll help you:
A Complete Guide to Flexbox
Basic Concepts of Flexbox
Flexbox Cheatsheet
You will have to change your CSS as shown below:
/*add this line to adjust paddings on the columns and remove default margin padding for all the html elements*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*change class to # it's ID and not class*/
#container {
width: 80%;
margin: 0 auto;
}
/*recommended to add width in percentage in css and remove fix width from <img width='200px' /> tag*/
.logo {
float: left;
width:20%;
padding: 10px 0;
}
/*add width 80% for <nav> tag*/
nav {
float: right;
width: 80%;
margin-top: 10%;
}
nav li {
display: inline-block;
/* margin-left: 70px; */ /*remove*/
/* padding-top: 2px; */ /*remove*/
position: relative;
/* padding-right: 0.1rem; */ /*remove*/
padding: 0 5px; /*instead add this for space between li content*/
}
I would recommend you to use CSS FLEXBOX.
I used flexbox to do this. your id="container" was not the same as the CSS so I changed it to class="container"
I added some simple 1px borders just to illustrate what is where on the page.
This is likely not a finished solution and only a starting point.
.container {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex: space-between font-size: 16px;
justify-content: center;
align-items: center;
}
.logo {
padding: 10px 0;
height: 3em;
border: 1px solid lime;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
border: 1px solid cyan;
justify-content: center;
align-items: center;
}
nav ul li::before {
content: "\200B";
}
nav ul {
display: flex;
flex-direction: row;
border: 1px solid blue;
list-style-type: none;
justify-content: center;
list-style-position: inside;
margin-left: 0;
padding-left: 0;
}
nav ul li {
padding-top: 0.2em;
padding-right: 0.1rem;
border: 1px solid pink;
margin-left: 0;
padding-left: 0;
}
nav li a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 0.875em;
margin-left: 1em;
margin-right: 1em;
}
<header id="masthead">
<div class="container">
<img src="logo.png" alt="logo png" width="200px" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>About Developers</li>
<li>History</li>
<li>Economy</li>
<li>Why Study in Dublin?</li>
<li>People and Culture</li>
</ul>
</nav>
</div>
</header>
This is the navbar used for each page which also contains my logo:
<header>
<a class="logo" href="#">My<span>Name</span></a>
<nav>
<ul class="navlinks">
<li>Work</li>
</ul>
</nav>
</header>
Here is the css:
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}
.logo {
cursor: pointer;
margin-right: auto;
padding-left: 0;
}
.navlinks {
display: inline-block;
padding: 0px 20px;
}
I would like to align all my pages' content to the logo in my navbar(top left) and have it "stick" on the same vertical line that my logo is on when the page size is adjusted.
For reference on how I would like my website to work/emulate behavior: http://www.roywilhelm.com
use a container class
.container {
max-width: 1200px;
margin-inline: auto;
}
header .container {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}
.logo {
cursor: pointer;
margin-right: auto;
padding-left: 0;
}
.navlinks {
display: inline-block;
padding: 0px 20px;
}
<header>
<div class="container">
<a class="logo" href="#">My<span>Name</span></a>
<nav>
<ul class="navlinks">
<li>Work</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<p>lorem ipsum dolor sit amet....</p>
</div>
I am having troubles making my list go to the left of my nav element. I have tried to make the nav element relative and list absolute, but that just makes the words overlap each other.
nav {
height: 50px;
width: 400px;
background-color: red;
}
li {
display: inline;
justify-content: space-evenly;
margin: 10px;
font-size: 20px;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
You can achieve the same result by setting display property of ul to flex
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
ul{
margin: 0;
padding: 0;
display:flex;
justify-content: space-around;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
The justify-content property is irrelevant here - it only applies to elements in a Flex or Grid layout.
The issue here is the default margin/padding on the <ul> and <li> elements.
You might also want to set the line-height on the <nav> so that the list items are more centred.
nav {
height: 50px;
width: 400px;
background-color: red;
line-height: 48px;
}
nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 10px;
font-size: 20px;
}
<nav>
<ul style="list-style: none">
<li>#stayhome</li>
<li>anime</li>
<li>queue</li>
<li>discord</li>
</ul>
</nav>
Taking this example as starting point, I am trying to create a navigation bar with a left-aligned and a right-aligned section, ensuring vertical alignment into middle for all the elements inside it.
Unfortunately, the right part is not vertically centered, even if right-aligned and left-aligned classes have both the vertical-align: middle property set. What do I am missing? Here is the code bunch:
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
vertical-align: middle;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
}
.left-aligned {
float: left;
}
.right-aligned {
float: right;
}
<html>
<body>
<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
About Us
</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
This is a great use case for flexbox - by adding the following three lines to your container class, you can achieve a left and right aligned section:
display: flex;
justify-content: space-between;
align-items: center;
So your final code will look like this (I've separated HTML and CSS for legibility):
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
About Us
</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
This justifies the direct children of the flexbox to horizontally align left and right with space in between. If more than two elements were to exist, they would be placed with equal spacing across the width of the container.
Align items will determine the vertical alignment of elements inside the flexbox.
This is true when flex-direction is not set (default value - row). When flex-direction is set to column, the "axis" affected by justify and align are reversed.
I've been banging my head against this for a good while now. I thought it would be simple, but... it's not.
My thought process and code.
The HTML
<nav className="navbar">
<div className="left">
<ul>
<li>HOME</li>
<li>ARTISTS</li>
<li>MEDIA</li>
</ul>
</div>
<div className="center">
<img src={logo} alt="" />
</div>
<div className="right">
<ul>
<li>MERCHANDISE</li>
<li>FAMILY</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</div>
The CSS (Sass):
$black: #000;
$white: #fff;
html,
body {
background-color: $black !important;
color: $white;
font-family: Helvetica;
font-size: 18px;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li {
display: inline;
padding: 5px;
}
.navbar {
display: flex;
text-align: center;
justify-content: space-between;
}
.left {
display: flex;
width: 200px;
}
.center {
display: flex;
justify-content: flex-start;
width: 120px;
}
.right {
display: flex;
}
.image-container {
display: flex;
justify-content: center;
}
So basically, the logo in the middle is never perfectly centered. No matter what I do. I can of course add some extra margin to make it centered, but that's just adding some more problems later on.
The items to the right, with className 'right' are also just pushed to the right because the length of the words is different.
I'm wondering if flexbox is the way to go for a simple navbar like this or not?
Does the fact that this gets wrapped in a div in React also mess with things? (Although it doesn't have a specific class).
Seems like everything I find online is either Bootstrap solutions or a completely different way that, as soon as you a different menu item, messes with the whole navbar.
Thanks in advance.
You are on the right track!
Try:
nav {
display: flex;
width: 100%;
text-align: center;
}
.center, .left, .right {
flex: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
padding: 30px;
}
I gave the nav a width:100%; so the flex:1 can take as much room as it's allowed.
Actually this is really simple, please follow this:
const App = () => {
return (
<div className="App">
<nav className="navbar">
<div className="left">
<ul className="list">
<li>HOME</li>
<li>ARTISTS</li>
<li>MEDIA</li>
</ul>
</div>
<div className="center">
<img src="https://dummyimage.com/50x50/000/fff" alt="" />
</div>
<div className="right">
<ul className="list">
<li>MERCHANDISE</li>
<li>FAMILY</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</div>
)
}
ReactDOM.render( <App /> , document.getElementById('root'))
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
}
.list {
display: flex;
padding: 0;
list-style: none;
margin: .25rem;
}
.list li {
padding: .25rem
}
/* make it responsive */
#media (max-width: 575.98px) {
.navbar {
flex-direction: column;
}
.list {
flex-direction: column;
text-align: center;
}
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>