I'd like to color my menu points:
like this
But only the text's background is colored. How can I change my code to fill the whole menu to match the color in the picture above?
nav{
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #F39C12 ;
width: 100%;
}
.nav_links{
display: flex;
justify-content: space-around;
width: 35%;
list-style: none;
margin: 0px;
padding: 0px;
}
.nav_links li{
background-color: #DAF7A6;
}
.nav_links a{
text-decoration: none;
letter-spacing: 2px;
color: whitesmoke;
}
<!-- navigation bar -->
<nav>
<ul class="nav_links">
<li>
Kezdőlap
</li>
<li>
Képek
</li>
<li>
Videók
</li>
<li>
Játék
</li>
</ul>
</nav>
Have a nice day! Thank you!
You must add padding to your li tag.
nav {
margin: 0px;
padding: 0px;
box-sizing: border-box;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #F39C12;
width: 100%;
}
.nav_links {
display: flex;
justify-content: space-around;
width: 35%;
list-style: none;
margin: 0px;
padding: 0px;
}
.nav_links li {
background-color: #DAF7A6;
/* EDITED HERE */
padding: 20px;
}
.nav_links a {
text-decoration: none;
letter-spacing: 2px;
color: whitesmoke;
}
<!-- navigation bar -->
<nav>
<ul class="nav_links">
<li>
Kezdőlap
</li>
<li>
Képek
</li>
<li>
Videók
</li>
<li>
Játék
</li>
</ul>
</nav>
You have to add border styling in order to achieve the attached image.
border: 1px solid ;
You can give any color you want in place of solid to design a colorful border
Related
I'm having trouble figuring out why the dropdown menu goes horizontal. I made a horizontal menu to start with and tried adding a dropdown to it. However, it goes horizontal and I can't figure out why.
I've been racking my brain over this for hours but I don't know what to do.
Please help me.
nav li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li:last-child {
border-right: none;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
background-color: #ffffff;
}
#menu-container {
display: flex;
width: 100%;
justify-self: center;
justify-content: center;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown {
position: relative;
z-index: 100;
}
.dropdown {
display: inline-block;
margin-left: 10px;
}
.dropdown:hover .dropdown-menu {
height: auto;
opacity: 1;
}
.dropdown-menu {
position: absolute;
z-index: 90;
align-items: stretch;
background-color: rgb(68, 68, 68);
list-style: none;
overflow: hidden;
height: auto;
opacity: 0;
transition: opacity 0.5s;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
top: 0;
}
<nav class="navbar">
<div id="menu-container">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link-dropdown" href="#">Women</a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="#">New</a></li>
<li><a class="nav-link" href="#">Tops</a></li>
<li><a class="nav-link" href="#">Bottoms</a></li>
<li><a class="nav-link" href="#">Accessories</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
if you write flex instead of block your navbar is shown as vertical because you can style the element on n the vertical side with flex
in CSS in the .new-menu write flex instead of block in display property
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column
;
}
In nav-menu class you need to add the property flex-direction and give it the value column.
This will make the cross axis go horizontally and main axis go vertically.
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column;
}
More about it in detail here Flex-direction
Dear you have a lot of errors in CSS Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>home</li>
<li>About</li>
<li>Services
<ul>
<li>Marketing</li>
<li>Design
<ul>
<li>Web</li>
<li>Graphics</li>
<li>Interior</li>
</ul>
</li>
<li>Branding</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
}
body{
background-image: url(1.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
height: 100vh;
}
.wrapper{
width: 860px;
margin: 0 auto;
}
.wrapper ul{
list-style: none;
margin-top: 2%;
}
.wrapper ul li {
background: #262626;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
font-family: poppins;
text-transform: uppercase;
font-weight: bold;
}
.wrapper ul li:hover{
background: crimson;
}
.wrapper ul ul{
display: none;
}
.wrapper ul li:hover > ul{
display: block;
}
.wrapper ul ul ul{
margin-left: 170px;
top: 0;
position: absolute;
}
In your css you've provided the selector nav ul. Now what this does, it applies the style to every ul descendent of parent nav. This means it is getting applied even to the dropdown-menu. Hence to specify that it is applicable only to the child we use the child combinator selector nav > div > ul
nav > div > ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
position: relative;
top: 0;
}
I'm new to flexbox and CSS. I'm trying to design this navbar where the flexbox contents taking an unnecessary linebreak for a single word. Please tell me how to fix that issue.
body {
background: #000;
margin: 0;
}
.logo-title #logo {
width: 20%;
min-width: 20%;
margin: 1.5em;
position: relative;
/* left: 40%; */
}
/* =================================================================
Layout
================================================================= */
header {
background: #869189;
padding: 2em, 0;
flex: none;
}
.container {
width: 90%;
max-width: 900px;
border: 1px solid magenta;
margin: 0 auto;
}
.container-nav {
display: flex;
justify-content: space-between;
}
/* =================================================================
Navigation
================================================================= */
nav ul {
/* Turns off the bullets */
list-style: none;
padding: 0;
display: flex;
justify-content: start;
}
nav ul li {
margin: 1em;
}
nav ul li a {
text-decoration: none;
color: #FFF;
font-weight: 600;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
padding: .25em 0;
}
nav a:hover,
nav a:focus {
text-decoration: none;
color: #1AF1CE;
}
.active-page {
border-bottom: 1px solid #1AF1CE;
}
.active-page:hover {
color: #1AF1CE;
}
<header>
<div class="container container-nav">
<div class="logo-title">
<img id="logo" src="https://via.placeholder.com/150" alt="CubeWind Logo">
</div>
<nav>
<ul>
<li> Home </li>
<li> About Us </li>
<li> Our Services </li>
<li> Our Products </li>
<li> Contact Us </li>
</ul>
</nav>
</div>
<!-- / .container -->
</header>
When I changed the display of container-nav into display:flex;, the navbar is taking 2 lines to display a single word. Here, I'm attaching a screenshot of the issue. Please help me to find the cause of this.
Thanks
Screenshot
I was just wondering how I would go about horizontally aligning all of the contents of the ul (unordered list) to the centre if that makes sense. As in instead of having their bottoms aligned, having their centres aligned.
Here is a photo of what it looks like currently: https://postimg.cc/S2YrpR24
Here is what I would like it to look like (Edited in photoshop): https://postimg.cc/N9YQT96G
My HTML for my header looks like this:
<header>
<nav>
<ul>
<li><a>Contact Us</a></li>
<li><a>Sign Up</a></li>
<li><img id="logo" src="img/schule logo light.png" alt="mainlogo"></li>
<li><a>Our Resources</a></li>
<li><a>The Teachers</a></li>
</ul>
</nav>
</header>
and my css looks like this:
header{
background-color: rgba(0,0,0,.5);
backdrop-filter: blur(10px);
color: #000000;
padding-top: 10px;
min-height: 110px;
position: fixed;
width: 100%;
}
header h1{
font-weight: 600;
margin: 30px 0px 0px 0px;
color: #000000;
}
header a{
text-decoration: none;
font-size: 20px;
color: #FFFFFF;
}
header img{
padding-top: 0px;
width: 40px;
}
header ul{
text-align: center;
padding: 15px;
margin: 0px;
}
header li{
display: inline-block;
list-style: none;
padding: 0px 30px 0px 30px;
}
Welcome to SO!
This looks like a very good use for flexbox, a decent demo site:
HEADER UL {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-align-content: stretch;
align-content: stretch
}
Maybe change
header img {
padding-top: 0px;
}
to
header img {
padding-top: 30px;
}
?
Hard to say with that snippets. Or post an URL?
Here is a working example using flex and vertically aligned items:
<header>
<nav>
<ul>
<li><a>Contact Us</a></li>
<li><a>Sign Up</a></li>
<li><img src="https://via.placeholder.com/200x100" alt="test image"></li>
<li><a>Our Resources</a></li>
<li><a>The Teachers</a></li>
</ul>
</nav>
</header>
<style>
ul {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
align-items: center;
}
li {
display: block;
flex: 0 1 auto;
list-style-type: none;
}
</style>
Hey guys I'm not sure what I'm doing wrong, but I want the 3rd li item (input) to go to the end of the container, when I use the justify-content: space-between; - nothing happens, I've tried aligning them, but still nothing.
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
}
.navContact {
margin-left: auto;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mainNav {
display: flex;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
You can set flex: 1 in the ul and the last item of the ul, then set margin-left: auto in the last li inside ul as well
*,
*::after,
*::before {
box-sizing: border-box
}
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
display: flex;
justify-content: space-between;
}
.mainNav {
display: flex;
flex: 1;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
.navitem:last-of-type {
margin-left: auto
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
So I've got my navbar set up pretty close to the way I'd like it to look, but for some reason it won't go to the center of my page. I've tried putting text-align: center; on most of the different elements that make up my nav bar, but it won't go no matter what I do. What am I doing wrong?
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
<div class="banner">
<h1>Brian Funderburke Photography & Design</h1>
<div class="nav">
<ul class="navbar">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Set the .banner width to 100% and then set .nav to center:
.banner{width: 100%;}
.nav{text-align: center;}
See fiddle: https://jsfiddle.net/c51kr3jo/
How I fix this problem usually is by following 3 steps:
Adding a full-width or a big width to the navbar container (.nav div in your case)
Adding a width to the navbar (usually try to find a width that will fit the most elements)
Adding margin: 0 auto to the navbar (this will center align the .navbar div)
Here is a jsfiddle I've created. Hope it helps.
I added
.nav {
display: flex;
justify-content: center;
}
Which I got from this AMAZING article.
http://jsfiddle.net/abalter/44w7b73f/
navbar center
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
/* center */
.nav1 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
text-align: center;
}
.navbar1 {
-webkit-align-self: center;
align-self: center;
}
li a:hover {
color: red;
cursor: pointer;
}
/* || center */
<div class="nav1">
<h1>Brian Funderburke Photography & Design</h1>
</div>
<div class="nav nav1">
<ul class="navbar navbar1">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Your code appears to already be working from what I can tell (though you were missing a closing </div> in your example). Make sure your CSS is being properly imported and applied.
Here is a working example to prove it is looking okay: http://jsfiddle.net/611mbvtu/