I am try to put the div nav2 on the same line as nav 1 but it just not going up what is the problem i even try float but it not working also
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display:
}
#navbar ul {
list-style: none;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px 0px 20px;
}
#nav2 {
float: right;
}
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
<div id="head">
<div>
<h3>Company</h3>
</div>
<div>
<h1>Invert Like a idiot</h1>
</div>
<div>
<p>because money is lame</p>
</div>
</div>
</div>
I expect that Both "nav1" and "nav2" on the name line just like normal navbar but i want "nav2" on the right side that why i make it div "nav2"
This is probably what you want to do :
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display: grid;
grid-template-columns: auto auto;
height: 50px;
}
#nav1 ul, #nav2 ul {
display: grid;
grid-gap: 20px;
grid-auto-columns: minmax(min-contant, max-content);
grid-auto-flow: column;
height: 100%;
align-items: center;
list-style: none;
}
#nav1 ul {
padding-left: 20px;
justify-content: left;
}
#nav2 ul {
padding-right: 20px;
justify-content: right;
}
#head {
padding: 50px 20px 0 20px;
}
<html>
<head></head>
<body>
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to have the elements in the middle 1240px of the screen using a wrapper, however, when I add the wrapper, the .space <li> element stops shrinking when I shrink down the page making my sign in button and sign out button disappear in the right side of the page. Also I've been wondering whether using an empty <li> with flex: 1 is the correct way of creating the space in between the first 3 <li> elements and the last 2.
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
You need to use percent to make it responsive.
Or, add max-width: 100%; if you want to maintain width: 1240px;
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 100%;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
Use width: 100%; to nav and wrapper
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
width: 100%;
}
nav{
width: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
I want to create a navigation panel like this
but I have a problem with img I can't put it in the middle
here is my code:
.leftNav {
text-align: right;
position: fixed;
width: 49%;
top: 0;
left: 0;
}
.rightNav {
position: fixed;
width: 49%;
top: 0;
right: 0;
left: auto;
}
.nav {
margin-top: 10px;
}
.nav li {
display: inline-block;
margin-left: 35px;
}
.nav li:first-child {
margin-left: 0;
}
.nav li a {
text-decoration: none;
color: white;
padding: 5px 0px;
text-transform: uppercase;
}
.wrapLogo {}
.logo {
height: 100px;
width: auto;
}
<header>
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<div class="wrapLogo">
<img src="./style/img/xxx.png" alt="" class="logo">
</div>
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
Thanks for all your help 😄
The best and simplest solution is to use flexbox.
You should put flex on the root div (.wrapNav) then to vertically align add align-items: center;.
.wrapNav {
display: flex;
align-items: center;
justify-content: center;
}
.nav {
display: flex;
/* RESET THE LIST */
list-style: none;
padding: 0;
margin: 0;
}
.nav li a{
display: block; /* MUST BECAUSE OF THE PADDING */
text-decoration: none;
color: red;
padding:0px 5px;
text-transform: uppercase;
}
.wrapLogo {
margin: 0 10px;
}
.logo {
height: 100px;
width: auto;
}
<header>
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<div class="wrapLogo">
<img src="http://via.placeholder.com/350x150" class="logo">
</div>
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
You can do it with the Flexbox:
body {margin: 0}
.wrapNav {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
align-items: center; /* and vertically */
background: Aquamarine;
}
img {
display: block; /* removes bottom margin/whitespace */
width: 100%; /* responsiveness */
}
.nav {
display: flex;
justify-content: space-between;
list-style: none;
}
.nav > li {
margin: 0 15px;
}
.nav li a {
text-decoration: none;
color: #000;
padding: 5px 0px;
text-transform: uppercase;
}
/* addition */
#media (max-width: 568px) { /* adjust to your needs */
.wrapNav {flex-direction: column} /* stacks flex-items vertically */
}
<header>
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<img src="http://placehold.it/200x100" alt="" class="logo">
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
Something like this?
.leftNav {
width:40%;
top: 0;
left: 0;
}
.rightNav {
width:40%;
top: 0;
right: 0;
left: auto;
}
.nav {
margin-top: 10px;
}
.nav li{
display: inline-block;
margin-left: 35px;
}
.nav li:first-child {
margin-left: 0;
}
.nav li a{
text-decoration: none;
color: white;
padding: 5px 0px;
text-transform: uppercase;
}
.wrapLogo {
width:20%;
}
.wrapNav{
display: flex;
}
.logo {
height: 100px;
width: auto;
}
<header style="background-color: black;">
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<div class="wrapLogo">
<img src="http://via.placeholder.com/150x150" alt="" class="logo">
</div>
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
I am using the following code in my header to display my logo and my navigation. I vertically centered my text with line-height: 90px; but when I try to give my logo vertical-align: middle; it doesn't seem to work. What am I doing wrong?
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
}
header img {
width: 59px;
height: 32px;
float: left;
}
nav {
float: right;
}
nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
<header>
<img src="images/logo.png" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Flexbox can do that:
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
display: flex;
justify-content: space-between;
align-items: center;
}
header img {
width: 59px;
height: 32px;
}
nav {} nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
nav ul li a {
color: white;
}
<header>
<img src="http://www.fillmurray.com/59/32" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Fixed div is getting down when I give margin-top to the div below it...why?
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
you need to add top:0 to your .header_bg, see more about position
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black;
top:0
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block