I want to build a navigation in the header containing three items where the first two ones are aligned left and the third one is aligned right. Tried it by use of flexbox but there is an arror: The ul is exceeding the width of it's parent container.
header {
width: 100%;
background: #417690;
margin-left: 10px;
margin-right: 10px;
font-size: 20px;
height: 70px;
}
header ul {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: center; */
}
header ul li {
display: inline-block;
padding-right: 15px;
margin-left: 10px;
}
.filler {
flex-grow: 1;
}
<header>
<ul>
<li>Logo</li>
<li>New article</li>
<li class="filler"></li>
<li>username</li>
</ul>
</header>
How can I fix this?
Tested in FF and Opera.
Reset margin to zero and add box-sizing: border-box to all elements to include the padding in the size calculations. You may also reset the padding for the ul element - see demo below:
* { /* ADDED */
box-sizing: border-box;
}
header {
width: 100%;
background: #417690;
/*margin-left: 10px;
margin-right: 10px;*/
font-size: 20px;
height: 70px;
}
header ul {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: center; */
padding: 0; /* ADDED */
}
header ul li {
display: inline-block;
padding-right: 15px;
margin-left: 10px;
}
.filler {
flex-grow: 1;
}
<header>
<ul>
<li>Logo</li>
<li>New article</li>
<li class="filler"></li>
<li>username</li>
</ul>
</header>
Try this:
header ul {
box-sizing: border-box;
padding: 0;
}
Related
I have a navigation bar and I added a red line on the bottom when hovering any item of the list, but I want to move that red line under the header (something like "Services"), any idea how to achieve this?
I added an small sample in codepen so you can easily check the HTML and CSS code
header {
background-color: lightblue;
padding-top: 1rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li:hover {
height: 100%;
border-bottom: 2px solid red;
}
<header>
<a href="/">
<p>Whatever logo</p>
</a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
CONTACT
</header>
Link to check the code
You can fix the header height and also fix the height of navbar items.
Also, you had one issue where on hover li elements are moving. You can also fix that with always adding border with transparent color to the element, so the overall height of the element won't change on hover state.
Here is the fixed CSS
header {
background-color: lightblue;
position: sticky;
display: flex;
height: 60px;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
header li {
display: flex;
align-items: center;
border-bottom: 2px solid transparent;
height: 60px;
}
header li:hover {
border-bottom: 2px solid red;
}
https://codepen.io/swarajgk/pen/JjZewPo?editors=1100
I think just giving height to all list elements the same as the header will work.
Like this:-
header {
background-color: lightblue;
padding-top: 1rem;
height: 3rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
height : 100%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li{
height: inherit;
}
header li:hover {
border-bottom: 2px solid red;
}
<body>
<header>
<a href="/"
><p>Whatever logo</p></a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
CONTACT
</header>
</body>
Hope this solves the issue.
header {
background-color: lightblue;
padding-top: 1rem;
height: 3rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
height : 100%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li{
height: inherit;
}
header li:hover {
border-bottom: 2px solid red;
}
I'd suggest the following approach, with explanatory comments in the CSS:
/* removing default padding and margin from all
elements, and forcing the browser to use the
same sizing algorithm - border-box - to calculate
element sizes, including the padding and border
widths in the declared size: */
*, ::before, ::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* setting common properties for the two element
groups: */
header,
header nav ul {
/* using display: flex layout: */
display: flex;
/* forcing the flex-items within the flex parent
to take the full height of that parent: */
align-items: stretch;
}
header {
background-color: lightblue;
block-size: 3em;
position: sticky;
justify-content: space-around;
}
/* using :is() to combine the two selectors
header a,
header li
into one selector: */
header :is(a, li) {
/* using grid layout: */
display: grid;
/* positioning the - including text - content
at the center of the element: */
place-items: center;
}
header nav {
min-width: 50%;
}
header nav ul {
/* the <ul> isn't a flex-item so we have to specify
that we want it to take all available space on
the block-axis (equivalent to 'height' in left-to-right
languages such as English): */
block-size: 100%;
list-style: none;
justify-content: space-between;
}
header li {
/* to prevent the jumping content: */
border-bottom: 2px solid transparent;
}
header li:hover {
/* to style the color of the bottom border: */
border-bottom-color: red;
}
<header>
<a href="/">
<p>Whatever logo</p>
</a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
CONTACT
</header>
JS Fiddle demo.
References:
align-items.
display.
justify-content.
place-items.
Bibliography:
"Aligning items in a flex container," MDN.
"Basic concepts of flexbox," MDN.
"Box alignment in grid layout," MDN.
I'm trying to create a flex header with nav. However, my image doesn't seem to be responsive. As I'm minimizing the width the menu seems to act responsive but my logo image doesn't.
The image is a dummy one, when i set an image with these certain width and height (without adding any dimensions in property i have the same issue)
How can i solve this?
body {
margin: 0;
margin: 0;
width: 100%;
display: flex;
}
header {
width: 100%;
height: 91px;
background-color: #222222;
position: relative;
}
a {
text-decoration: none;
color: #fff;
font-size: 15px;
line-height: 17.22px;
}
ul {
list-style: none;
}
nav {
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
margin-right: 280px;
}
li {
margin-left: 35px;
}
nav img {
display: flex;
margin-left: 254px;
position: relative;
}
<body>
<header>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
<ul>
<li style="margin-left:0;">Hompage</li>
<li>About us</li>
<li>Our Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
Preserve aspect ratio:
img {
height: 91px;
width: auto;
}
please check the code you need to add height: 91px; object-fit: contain; in logo image and set max-width for responsive you need to add media query I have mention in code so you can check it.
body {
margin: 0;
margin: 0;
width: 100%;
display: flex;
flex-direction:column;
}
header {
width: 100%;
padding: 10px 0;
background-color: #d2d2d2;
position: relative;
}
a {
text-decoration: none;
color: #000;
font-size: 15px;
}
ul {
list-style: none;
padding:0;
margin:0;
}
nav {
display: flex;
justify-content: space-between;
padding:0 5%;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
}
li {
margin-right: 35px;
}
li:last-child {
margin-right:0px;
}
nav img {
display: flex;
position: relative;
height: 91px;
object-fit: contain;
width: 100%;
max-width: 100px;
}
#media screen and (max-width:575px){
nav{flex-direction:column;}
nav ul {
display: flex;
justify-content: left;
align-items: center;
margin-top: 20px;
flex-wrap: wrap;
}
}
<body>
<header>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
<ul>
<li style="margin-left:0;">Hompage</li>
<li>About us</li>
<li>Our Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
How can I align 2 different Component side by side using flexbox ?
I have my 1st component "nav-menu" and the 2nd "homepage" I would like it to be side by side.
homepage.component.html
<app-nav-menu></app-nav-menu>
<div class="container">
<div>
<img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
</div>
</div>
I gave a width to my container
homepage.component.css
.container {
display: flex;
width: 50%;
}
div.container>div {
flex-grow: 1;
}
img {
width: 20%;
height: auto;
}
nav-menu.component.html
<h1>Furniture</h1>
<nav class="nav" role="navigation">
<ul clas="menu">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Cart</li>
</ul>
</nav>
I gave a width to my nav
nav-menu.component.css
* {
box-sizing: border-box;
}
h1 {
display: flex;
justify-content: space-between;
margin-left: 30px;
margin-bottom: 100px;
}
nav {
width: 40%;
}
.nav ul {
margin: 0px;
padding: 0px;
background: white;
list-style: none;
}
.nav a {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.5em;
text-decoration: none;
color: black;
font-size: 2em;
width: 10px;
}
.nav a:hover {
color: #FFA500;
transition: 0.1s;
}
whats the next step ?
thanks.
you have to wrap your both components in a flex
<div style="display: flex; flex-grow: grow">
<app-component-1></app-component-1>
<app-component-2></app-component-2>
</div>
I have a side nav-bar. I want the items to be evenly spaced so that it fills out the whole 'bar'.
I've tried making my 'container' have justify-content: space-between. However, it's not taking the flex attribute.
I'll post my code as it'll show what I mean.
I also would like it that it stays 'fixed' but doing so cuts the 'container' to about 50% height.
https://codepen.io/azhorabai/pen/MOOwrJ
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: "Dosis", sans-serif;
}
body {
display: flex;
min-height: 100vh;
flex-flow: row wrap;
margin: auto;
background-color: black;
}
.side-menu {
background-color: lightcoral;
font-size: 2em;
text-transform: uppercase;
justify-content: space-between;
}
.side-menu ol {
list-style-type: none;
max-width: 100%;
padding: 0px 30px;
}
.side-menu li {
line-height: 5em;
}
#projects {}
.top-header {
background-color: lightgreen;
height: 20vh;
box-sizing: border-box;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
</head>
<body>
<title>X. Quisite</title>
<nav class="side-menu">
<ol>
<li class="about-me">About</li>
<li class="projects">Projects
<li>
<li class="skills">Services</li>
<li class="contact">Contact</li>
</ol>
</nav>
</body>
</html>
The justify-content property applies only to flex containers. So it must apply to an element that also has display: flex or display: inline-flex (read more).
body {
display: flex;
height: 100vh;
margin: 0;
background-color: black;
}
.side-menu {
background-color: lightcoral;
font-size: 2em;
text-transform: uppercase;
justify-content: space-between;
display: flex; /* new */
flex-direction: column; /* new */
}
a {
padding: 0px 30px;
}
<nav class="side-menu">
<a class="about-me">About</a>
<a class="projects">Projects</a>
<a class="skills">Services</a>
<a class="contact">Contact</a>
</nav>
When applying flex rules like justify-content: space-between; you need to apply them to an element with the rule display: flex declared.
These flex rules will apply to direct descendant nested elements only, so you should declare them to the unordered list item (ol), then specify the flex-direction: column so that you can justify the content vertically. In addition, you can declare align-items: center; to horizontally align the list items (these rules typically work in reverse if the direction has been specified horizontal, or row, e.g: flex-direction: row).
Lastly, your fixed navigation will occupy the full height of the viewport if you declare top: 0 and bottom: 0 properties.
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: 'Dosis', sans-serif;
}
body{
display: flex;
min-height: 100vh;
flex-flow: row wrap;
margin: auto;
background-color: black;
}
.side-menu {
background-color: lightcoral;
font-size: 2em;
text-transform: uppercase;
position: fixed;
top: 0;
bottom: 0;
}
.side-menu ol {
list-style-type: none;
max-width: 100%;
padding: 0px 30px;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 0;
height: 100%;
align-items: center;
}
.side-menu li{
/*line-height: 5em;*/ /* unset for code snippet preview */
}
#projects{
}
.top-header{
background-color: lightgreen;
height: 20vh;
box-sizing: border-box;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
</head>
<body>
<title>X. Quisite</title>
<nav class="side-menu">
<ol>
<li class="about-me">About</li>
<li class="projects">Projects</li>
<li class="skills">Services</li>
<li class="contact">Contact</li>
</ol>
</nav>
</body>
</html>
I want my UL to do the following things:
I want to have my UL vertically centered in Nav. I tried using a
wrapper with display: table; but that didn't work.
I want my LI's to be evenly spread horizontally across the width of
the UL, which I did with display: flex; just not perfectly.
And I need it to be independent from the height because that might change later on.
I have the following code:
nav {
width: 780px;
height: 50px;
text-align: center;
background-color: pink;
}
nav ul {
list-style-type: none;
display: flex;
}
nav ul li {
display: inline-block;
margin: 0 auto;
padding: 10px;
background-color: lightgreen;
}
<nav>
<ul>
<li>sample</li>
<li>sample</li>
<li>sample</li>
</ul>
</nav>
fiddle
I hope you can help me, Thanks in advance.
Just a bit of tweaking to your flexbox layout:
nav {
width: 780px;
height: 50px;
text-align: center;
background-color: pink;
}
nav ul {
height: 100%; /* take height of nav parent */
list-style-type: none;
padding-left: 0; /* remove default UL padding */
display: flex;
justify-content: space-around; /* horizontal alignment (applies to child elements) */
align-items: center; /* vertical alignment (applied to child elements) */
}
nav ul li {
/* display: inline-block; <-- not necessary */
/* margin: 0 auto; <-- not necessary */
padding: 10px;
background-color: lightgreen;
}
<nav>
<ul>
<li>sample</li>
<li>sample</li>
<li>sample</li>
</ul>
</nav>
Revised Fiddle
It can be done by using display:table & display:table-cell. Please check this updated Fiddle
nav {
width: 780px;
height: 50px;
text-align: center;
background-color: pink;
display: table;
}
nav ul {
list-style-type: none;
display: table-cell;
vertical-align: middle;
padding: 0;
}
nav ul li {
padding: 10px;
background-color: lightgreen;
width: 33.33%;
box-sizing: border-box;
float: left;
}