Still learning css...
I've just got one major issue..
My nav-bar is currently squished. I'm not sure how to space out the text away from each other to go wider, so it takes up more space.
I have tried using the following (got it from similar post as mine):
justify-content: space-between
but that didn't work.
Lastly, (just a random trick Id like to learn )if you know how to do it..
How would I separate the two sides from the logo to be pushed away to left and right? As an example..
All content from the left side of the logo, is showing from the edge of the left screen and vice versa for the right side. But the logo remains in the middle. And all text remains horizontal.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav a{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="styling.css" type="text/css">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</body>
<script src="app.js" charset="utf-8"></script>
</html>
In order to use justify-content, you need to set display: flex on the parent element first. I'd also suggest not to use justify-content: space-between but justify-content: space-around while resetting the default left padding of the <ul> to get even spacing. Alternatively, set the right padding to an equal value while using justify-content: space-between.
In order to have the logo take up more space and the menu items to be "pushed" to the sides, just set the logo's <li> to something like 50% width, flex layout will take care of the rest. I added a class "logo" to the element in order to achieve that.
Update: About keeping the menu items centered horizontally, you can achieve that by using align-items: center on the flex container.
Update2: I've also added in an example pushing the items as far to the sides as possible by setting the logo width to 100% and a margin of 10px between the elements, as well as a 15px padding to the menu bar itself.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav ul {
display: flex;
justify-content: space-around;
padding: 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav2 .logo {
width: 50%;
}
.nav3 {
padding: 15px;
}
.nav3 .logo {
width: 100%;
}
.nav3 li {
margin-left: 10px;
}
.nav3 li:first-child {
margin-left: 0px;
}
.nav4 ul {
align-items: center;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the menu items aside:</p>
<div class="nav nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the items as far aside as possible, with a fixed-width spacing:</p>
<div class="nav nav3">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Nav items centered horizontally:</p>
<div class="nav nav4">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
In this case .nav ul has been set as a flex-container with display:flex;
Rather than using space-around, I have added a class to the logo and set the flex property to 1 (flex: 1). This pushes the left/right nav items apart and the logo expands to take up the remaining space.
.nav li items has been given a bit of padding so they aren't squished together.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px;
}
.nav ul {
display:flex;
align-items:center;
margin:0;
padding:0;
}
.nav li{
list-style: none;
display: inline-block;
padding:0 10px;
}
.logo {
flex:1;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class='logo'><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</ul>
</div>
Related
I'm trying to get the last two of the link "Get started" and "Hire me" to right at the end of the navigation. I've attach a photo and also my code. I'm using SASS for styling
I have Been try and error with this issue for 4 days.I managed to put it the way I wanted it using display flex, it worked after I position absolute on the logo
enter image description here
.header
max-width: 100%
height: 80px
border: 1px solid #dfe3e8
.container
height: 100%
max-width: 100%
padding: 0px 7em
display: flex
justify-content: flex-start
.logo
background: url("/sass/img/test-logo2.svg")
size: contain
repeat: no-repeat
width: 135px
height: 35px
margin: 20px 20px 0px 0px
.nav
margin: 7px 0px 0px
ul
lists-style: none
ul li
display: inline-block
padding: 20px
ul li a
text-decoration: none
.right-nav
display: inline-flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pratice</title>
<link rel="stylesheet" href="css/app.css" type="text/css">
<!--- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<!---<img src="../sass/img/test-logo2.svg" alt="test" class="logo">-->
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<div class="right-nav">
<li>Get started</li>
<li>Hire me</li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
You need to fix the markup first, a div cannot be directly under ul. And I suggest to use flexbox for the layout.
.nav ul {
display: flex;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto; /* align last two items to the right */
}
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
To include the logo be part of the row, you can either 1) use nested flexbox, or 2) make the logo to be one of the list items.
Example 1:
.container {
display: flex;
align-items: center;
}
.nav {
flex: 1;
margin-left: 20px;
}
.nav ul {
display: flex;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto;
}
<div class="container">
<div class="logo"><img src="https://i.stack.imgur.com/U8Pq6.png" width="30" height="30" alt=""></div>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
</div>
Example 2:
.nav ul {
display: flex;
align-items: center;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto;
}
<nav class="nav">
<ul>
<li><img src="https://i.stack.imgur.com/U8Pq6.png" width="30" height="30" alt=""></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
Have you considered using bootstrap or another css framework? By doing this without a css framework you're doing a lot of reinventing the wheel. Practically every webpage in the world has a navbar so this kind of thing is built for you with the framework. It also has the added perk of being responsive so it looks good on all devices (desktops, tablets, phones). In general you will have a much easier time.
Here is documentation for the bootstrap navigation bar component:
https://getbootstrap.com/docs/4.0/components/navbar/
Here is a page with some examples you can play with:
https://getbootstrap.com/docs/4.0/examples/navbars/
I’m trying to figure out how to reposition the entire <ul> element to the center of the screen, yet every time I try a new method the drop-down items get jumbled up by either shifting slightly to the right or they lay on top of one another.
Can someone lend a hand, let me know what I’m doing wrong and give me some tips to make it a bit easier?
Here’s what I’m working with.
html,
body {
margin: 0px;
padding: 0px;
}
.menu ul {
/*This is blank because nothing I tried works*/
}
ul {
list-style: none;
font-family: cursive;
margin: 0;
padding: 0;
}
ul li {
float: left;
display: block;
height: 50px;
width: 200px;
background-color: lightgray;
}
ul li a {
display: block;
color: black;
text-decoration: none;
line-height: 50px;
text-align: center;
}
ul li a:hover {
background-color: lightblue;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<div class="menu">
<ul>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</body>
</html>
ul {
display: flex;
justify-content: center;
}
Add this code to your UL tag, it should center the whole thing
I tried placing two nav bars under each other but I am facing difficulty in aligning the second nav bar in respect to the first one. I didn't quite understand why the second nav bar does'nt float right.
Below are my html and css codes.
.header_nav1 {
display: block;
float: right;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width: 1024px;
}
.header_nav1 ul li {
padding-top: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
.header_nav2 {
display: block;
padding: 50px;
}
.header_nav2 ul li {
display: inline;
list-style-type: none;
float: right;
padding-right: 15px;
max-width: 1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
Thank you.
I found out that it is caused by the container class.
You can either remove the container or change float: right to display: inline-block
Don't use float:right instead use display:inline
why inline? inline - basically it starts with new line and occupy the whole parent size
I also combine both header_nav1 and header_nav2 on 1 CSS since both of it has the same layout
Here, check the snippet codes below and try seeing it also in full page. Hope it helps.
.header_nav1, .header_nav2 {
display: inline;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width:1024px;
}
.header_nav1 ul li{
padding-top: 10px;
padding-right:10px;
list-style-type: none;
display: inline;
}
.header_nav2 ul li{
display: inline;
list-style-type: none;
padding-right:15px;
max-width:1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>
Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}
I have looked a few questions so far that are very similar to this one, but still can't find the answer to my question. (Please note that I am new to HTML and that this is my first post).
I want to have a navigation bar that spans the width of the page no matter the width of the screen that it is being viewed on. I tried making the 's width 100%, but it still did not do anything.
The code for the navigations bar is here:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
Can you please help me to find a way to make the navigation bar span the width of the page?
Thanks!
If you want to expand the li to be the same size and fill the width of the ul, flexbox can do that.
Modern Browsers - Flexbox
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}
li {
flex:1 0 auto;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding:10px 0;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
Alternative Solution: Old Browsers - CSS Tables
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
You have already given your nav a width of 100%. Now try adding a width to your LI element in your CSS to evenly distribute them across the 100% width of the nav.
li {
float: left;
width:25%;
}
nav is already 100% width,with this css configuration.Give it some background you will be able to see it.
So right how, the navigation bar is spanning the width of the page, however the objects inside aren't large enough to fill the gap. This can be seen if you add a background color to the navigation bar. What you might consider is center-aligning the objects within the nav bar or expanding the width of each object to near 25%
Are you trying to make the nav tag expand from window edge to window edge?
If so you will want to remove the margin on your body:
body {
margin: 0;
}