I've been trying to make that website for YouTube views and like bot and the logo isn't clickable somehow.
navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: gray;
}
.navbar ul li {
float: left;
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bolbol.png);
width: 150px;
height: 100px;
text-indent: -1400px;
background-size: 100% 100%;
}
li:nth-child(2) {
position: relative;
top: 25px;
}
<div class="navbar">
<ul>
<li>Logo</li>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
https://jsfiddle.net/6L3jak0s/
I think what you are trying to do is to make things look like a header, it's better with flexbox. Something like this maybe..
.navbar {
display: flex;
background-color: gray;
margin: 0;
padding: 1rem;
justify-content:space-between;
align-items:center;
}
.navbar ul {
list-style-type: none;
display: flex;
align-items:center;
}
.navbar ul li {
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bololo.jpg);
background-size: 100% 100%;
}
.navbar a {
display: block;
}
<div class="navbar">
Logo
<ul>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
Remove this property "text-indent: -1400px;" from this rule "li:first-child Rule".
and then add the following CSS.
.navbar li a {
width: 100%;
height: 100%;
display: inline-block;
text-indent: -1400px;
}
Related
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
I'm coding a menu in french but I need to move all the buttons (Home, About us...) to the right.
I tried with float: right; but it doesn't work.
Here is my Result :
My Result
The <a> Home, Informations, etc.. are in a div. It's this div that i want to push right !
My Objective :
My Objective
My Code:
/*
==============================
NAVBAR
==============================
*/
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
/*padding: 10px 0;*/
}
nav {
float: right;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Thanks
Float won't work because your container is a flex-container.
Just use:justify-content:space-between`
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
justify-content: space-between;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Bootstrap's "Container" class has a max-width of something like 1800px(not certain of exact px count).
Try using "container-fluid". This should allow the nav items to move to the far right but will probably move your logo to the far left because of your .logo float-left css.
You can give the logo a margin-left that works for you.
Edit: I just noticed you've defined your own .container class in the css. And margin set to 0 auto. This is going to center your content within the container class and give you max width of 80% so your content won't reach the far right side of the browser unless you set this items to "position:absolute" and then give them the necessary margins.
Try changing your nav class from:
nav{
floaf: right;
}
to:
nav{
position: absolute;
right: 20px;
top: 0px;
}
This should force your nav element to position it's right 20px left of the parent elements right. Tested in chrome.
remove the float: right from your .nav and add float:left from .logo
Now add display:flex to your .logo and for your container add:
.container{
justify-content: space-between;
}
I have not tested this. Let me know if this is what you wanted.
I am currently having an issue where my navigation bar and banner shrink when I set their position to fixed.I have many things like changing z-index,setting its top position to 0,adding auto margin etc, and none of it worked.I hope someone can point me to my mistake.This is my html code:
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
this is how it should look like
this is how it looks like when i put .top{position:fixed}
When you set an element to absolute or fixed position, it will be out of the the normal content flow and trigger the shrink to fit feature. You can apply the offsets and width/height to position and recreate the box size you wish to have.
.top {
position: fixed;
left: 0; /* ADDED */
top: 0; /* ADDED */
width: 100%; /* ADDED */
}
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
Because .top has no width. However, when set to fixed it is using the viewport width to calculate the width. You might want to set it to 75%.
You also might want to set .container to position: relative so .top will relate to its borders.
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
position: relative;
}
.top {
position: fixed;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
I was attempting to build a responsive nav using flexbox. When the screen is smaller than 744px, I wanted a toggle button to appear, the main nav to have a max-height of 0, and then on click, have the nav display in block. Fairly typical stuff.
However, I'm used to doing this just with floats and I'm running into several problems:
I don't understand how to drop the UL below the nav without pushing the nav logo and toggle up;
The UL with the LI doesn't seem to be responding to the max-height trick.
If anyone can provide some assistance or point me in the direction of tutorial that would be great.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'open-sans', 'sans-serif';
font-size: 17px;
color: #444;
}
.navText {
font-size: 14px;
}
nav {
height: 100%;
width: 100%;
background-color: white;
}
.nav-fixedWidth {
//border: 1px solid;
min-height: 120px;
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.mainNav {
list-style: none;
display: flex;
}
.mainNav li {
margin-right: 60px;
padding: 10px;
//border: 1px solid;
}
.mainNav li:nth-child(5){
margin-right: 10px;
}
.mainNav li a {
text-decoration: none;
color: #444;
display: block;
}
.mainNav li a:hover {
color: #9d9d9d;
}
.logo {
height: 60px;
width: 60px;
background-color: #ccc;
}
.toggle {
height: 60px;
width: 60px;
background-color: #ccc;
display: none;
}
#media screen and (max-width: 960px) {
.nav-fixedWidth
{
width: 95vw;
}
}
#media screen and (max-width: 744px) {
.nav-fixedWidth
{
flex-wrap:wrap;
}
.toggle
{
display: block;
}
}
<nav>
<div class="nav-fixedWidth">
<div class="logo"></div>
<div class="toggle"></div>
<ul class="mainNav">
<li class="navText">Webinars</li>
<li class="navText">e-Books</li>
<li class="navText">Blog</li>
<li class="navText">e-Course</li>
<li class="navText">Search</li>
</ul>
</div>
</nav>
I know this might be a bit late for your particular need, but you might want to take a look at this solution by Chris Coiyer
https://codepen.io/chriscoyier/pen/GJRXYE
html {
background: #666;
}
body {
width: 60%;
margin: 0 auto;
background: white;
}
.nav {
position: relative;
ul {
display: flex;
height: 3rem;
overflow: hidden;
flex-wrap: wrap;
list-style: none;
padding: 0;
width: 80%;
}
li {
a {
display: block;
padding: 1rem 0.5rem;
text-decoration: none;
white-space: nowrap;
}
}
&.open {
ul {
height: auto;
display: block;
}
}
}
.x {
position: absolute;
top: 0.75rem;
right: 0.75rem;
cursor: pointer;
}
This solution does require a small amount of JavaScript to toggle the menu.
Hope it helps :-)
How am I able to center the photo with the text, without minimizing the photo itself?
I've tried; max-height: xx, but that wasn't it.
The photo is centered in height, but not the text. How's this possible?
http://jsfiddle.net/gLpqoamn/
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre" style="float:right;">Donate</li>
</ul>
</div>
</header>
</body>
I would use flex on the ul, then you can use align-items to vertically center or position the children. A margin-left: auto on the last link will push it to the right, then you can move the background color to the link to keep it from stretching the height of the parent
.hoyre {
margin-left: auto;
background-color: #f19f00;
min-height: 100%;
align-self: stretch;
display: flex;
align-items: center;
}
.hoyre:hover {
background-color: #d98500;
}
header {
background-color: white;
}
.logo {
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
display: flex;
align-items: center;
}
li {}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li>
<img src="http://i.imgur.com/QAEzQxp.png" class="logo">
</li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre">Donate</li>
</ul>
</div>
</header>
</body>
For using height:100% in your css you should define parent element height first. then you change li element to behave like table and fill 100% height.
Update your styles like this(new styles have comment in front of them):
li {
float: left;
height: 100%; /*fill height */
display: table; /* behave as table*/
}
li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}