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/
Related
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>
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;
}
Hi I am trying to create a personal website and am having some problems with the styling at my header, specificaly related to positioning.This is how my header looks now:
The NA in the middles is actually an image circle that should overlap the black borders , but I can not seem to figure out how to do it.This is my markup:
<section class="top-bottom-border overflow">
<div class="center">
<ul id="social">
<li><img src="images/social/FacebookIco.png"></li>
<li><img src="images/social/TwitterIco.png"></li>
<li><img src="images/social/LinkedinIco.png"></li>
<li><img src="images/social/LinkedinIco.png"></li>
</ul>
</div>
</section>
<nav class="center overflow" id="menu">
<ul class="float-left">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
</ul>
<ul id="logo">
<li><img src="images/Logo.png" alt="logo"/></li>
</ul>
<ul class="float-right">
<li>Skills</li>
<li>Portfolio</li>
<li>Contact me</li>
</ul>
</nav>
<section class="top-bottom-border"></section>
And this is my css:
.center {
margin: 0 auto;
width: 960px;
}
.overflow {
overflow: hidden;
}
.top-bottom-border {
background: url(../images/top-bottom-border.jpg);
height: 37px;
}
ul#social{
float: right;
}
ul#social li {
display: inline-block;
margin-left: 10px;
margin-top: 5px;
}
nav#menu{
position: relative;
height: 50px;
}
nav#menu li{
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
nav#menu .float-left{
padding-left: 150px;
}
nav#menu .float-left li{
margin-right: 25px;
}
nav#menu .float-right{
padding-right: 150px;
}
nav#menu .float-right li{
margin-left: 25px;
}
ul#logo{
position: absolute;
left: 400px;
top:-40px;
}
How can I make the image in the center overlap the two black borders?
<nav class="center overflow" id="menu"> the z-index isn't coming into act because you've overflow: hidden for your #nav so the logo that overflows it is not displayed. Removing overflow class from it will fix display of your logo.
Edit As far as I can understand your layout and the goal, you might also want to add float: left to nav#menu .float-left and float :right to nav#menu .float-right
You could try adding a style="z-index: 5" to the li or ul of the logo