I am learning css these days. I am designing a navbar by using css flexbox. Here is my html and css code, but they are not working on my browser.
Can anybody find any problem?
* {
margin: 0px;
padding: 0px;
}
/* Navigation Bar */
#navbar {
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website Page</title>
<link rel="stylesheet" href="/originals/style.css">
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</body>
</html>
The display: flex property only applies to the direct children elements within the flex container. I'm guessing that you want the list items to also be "flexed" so in order to do that - you need to apply display flex to the ul as well as the nav.
In other words - the nav bar applies display flex to ONLY the div containing the image image and the ul. In order to align and space out the list items - the ul needs to also be a flex container. I am using space-around to space out the list items - but obviously you might need to alter the styling to suit your needs.
*{
margin: 0px;
padding: 0px;
}
/* Navigation Bar */
#navbar{
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
}
#navbar ul{
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
list-style: none;
flex-grow: 1;
justify-content: space-between;
margin-left: 32px
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
I am not sure what you are trying to achieve, I suppose you need all items in the navbar evenly distributed on a horizontal line on top of the page. If that is what you need, a few indications:
The main problem is that display: flex will distribute only the immediate children of the box with that property. In your case it means that your flex items are the logo div and the ul as a whole, and it will not distribute the items inside the ul. To achieve the latter effect, you would also need to set the ul display to flex.
You are using the align-items property to configure flex items alignment, but this property aligns items in the direction opposite to the flex direction. As your flex direction is row, align-items: center aligns them in center vertically, from top to bottom. You won't notice its effects here because your container by default has the same height as its content, so items can't be assigned different vertical positions. But if you specify a larger height for your flex container, you will notice that all flex items will appear in the middle of the flex container's height; that could be useful in the outer flex container to align the ul items in the middle of the logo's height.
You should try the property justify-content to align your flex items in the same direction of your flex container, in this case horizontally. Try checking different values for this property, like space-around or space-evenly to achieve the distribution you need.
The top property is not needed here, unless you use it with a positioned element. You need to use it together with some value for the position property.
A CSS flexbox handles the row and column alignment of direct children elements to the parent in which flexbox has been applied. For Example, In your code:
<nav id="navbar"> is the parent which contains direct children elements, <div id="logo"> and <ul>, anything inside <div id="logo"> and <ul> are not the direct children to <nav id="navbar">. So, if you observe the <div> containing logo and the <ul> containing list of links are aligned horizontally beside each other due to #navbar ul{ display: flex;}
In order to make your list of links appear beside each other horizontally much alike your logo and list, you will need to give <ul> element display flex because <ul> acts as the direct parent element to <li> elements ; and since default value of flex-direction is row you may or may not set the value for it, as you like.
Hope this helps clarifying your concepts. Keep Learning!
#navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar > ul{
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar > ul > li{
margin-right: 0.875rem;
list-style-type: none;
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
Related
I have a navigation column on the left side of the window and I need to position the last navigation item at the bottom of the column. However, I need that item also move up to its normal position below the second to last list item if the window is resized and the height decreases.
I'm using React and Material-UI's List and ListItem components to create this navigation column. They render as a <ul> with <li> tags inside.
I've tried using position: fixed, bottom: 0 on the last <li> tag which positions it correctly at the bottom, but when the window is resized, it overlaps the other list items.
I've also tried setting the <ul> to display: flex, flex-direction: column and then setting the last <li> margin-top to some value...but I really don't want to set a value for this because it's supposed to be responsive.
This is as close as I've made it - CodeSandbox. What CSS can I use to make the last list item at the bottom and move it up when the screen/window is resized?
You're almost there with flex. Use margin-top:auto on the last <li>:
html {height:100%}
body {
width: 50%;
height: 100%;
}
ul {
height:100%;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
}
li {
border: solid;
padding: 0.5rem;
}
li:last-of-type {margin-top:auto}
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li class="right">THIS ONE FLEX END</li>
</ul>
I have a div that has a table inside it, and it uses to create the links to it. So far, that's all I have done for the website. I'm attempting to space out the rows so that I can implement jQuery into it, however, I haven't started that yet.
My problem is that I can't get the rows to space evenly throughout the div. I've tried padding-left/right, however, that doesn't work with width and height, and margin-left/right aren't working. Is there a way to do this? Or, should I just get rid of the idea of using a table and create divs for each nav option?
Code
Here's one possible solution using lists and display:flex for positioning. Your updated example: https://repl.it/Hj62/6.
HTML part:
<div id="header-nav-content">
<ul class="table-nav-content">
<li class="nav-home">Home</li>
<li class="nav-about">About</li>
<li class="nav-contact">Contact</li>
</ul>
</div>
CSS part:
.table-nav-content {
text-align: center;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
}
.table-nav-content li {
list-style: none;
}
You can also check if:
justify-content: space-between;
doesn't suit you better. You can find more about flex positioning, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would recommend that you use the HTML list approach, https://www.w3schools.com/html/html_lists.asp. You might want to use margin not padding to space out each item evenly, When to use margin vs padding in CSS.
<ul style="list-style:none;">
<li style="display:block;float:left;margin:5px" class="nav-home">Home</li>
<li style="display:block;float:left;margin:5px" class="nav-about">About</li>
<li style="display:block;float:left;margin:5px" class="nav-contact">Contact</li>
</ul>
I'm slowly getting to grips with Flex but it has got me confused how I can make all li elements within a ul.list float right. I've read that in order to get the item floating right you simply use margin-left: auto however this only seems to work correctly on the last item, because when I resize the viewpoint to above 1920px or above the gap between the email and telephone number increases... while the left side of the top menu but remains the same distance between each li element.
Here is my HTML:
<header class="ProMenu">
<nav class="row align-middle expanded">
<div class="small-12 medium-4 columns Links">
<ul class="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="medium-4 columns Logo">
<img src="https://placehold.it/64x42" alt="">
</div>
<div class="medium-4 columns Contact">
<ul class="menu">
<li>Phone: 0777123456</li>
<li>Email: jog#blogs.com</li>
</ul>
</div>
</nav>
</header>
And my CSS:
.ProMenu {
background: #0071c5;
width: 100%;
}
.ProMenu .row {
min-height: 60px;
max-width: 100%;
}
.ProMenu ul li a {
color: #FFF;
}
.ProMenu .Logo {
text-align: center;
}
.Contact ul li{
margin-left: auto;
}
JSFiddle:
And to make things easier I've uploaded the code to a online JSfiddle, to replicate make the window big and monitor the distance between both the mobile number and email increases... something that I want to stop.
You want to utilize the foundation .align-right class, which will apply justify-content: flex-end;
https://jsfiddle.net/28btx50v/2/
Remove the margin-left: auto from the last child. Put it only on the second to last child. That will force both elements to the right.
When a flex item has margin-left: auto, it pushes itself away from everything on its left. In your case, that makes sense for the second to last child. But it doesn't make sense for the last child.
That's why when you widen the screen you get a wider separation between the two.
By using margin-left: auto only on the second to last item, you pack both items together and everything shifts right. You can then use regular (numerical) horizontal margins, if necessary, to create space between them.
I have a submenu underneath a menu that has the property display: flex, and the list items have the property flex-grow: 1
I would like to align the submenu so that the links are aligned with the parent like so:
This is working because I gave the submenu the property left: 19px. This works but the problem is that since the menu and its items are displayed flex, when the browser shrinks the width of the list item shrinks with it, so the submenu does not get aligned. Below is a screenshot when the browser shrunk 200px:
Is there a css class or anything I can do to have the submenu links align with the parent links on browser shrink? I could technically make a ton of media queries and change the left: but I thought I would ask if anyone has a better solution.
Here is my code. I stripped out alot but left the code that seemed necessary for this question.
#menu-main-menu {
display: flex;
}
#menu-main-menu li {
float: left;
flex-grow: 1;
text-align: center;
position: relative;
}
#menu-main-menu li a {
display: inline-block;
padding: 40.5px 0;
}
#menu-main-menu .menu-item-has-children .sub-menu {
position: absolute;
left: 19px;
}
<ul id="menu-main-menu">
<li class="menu-item-has-children">
Services
<ul class="sub-menu">
<li>Child Page</li>
<li>Child Page</li>
<li>Child Page</li>
</ul>
</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
The problem you describe in your question cannot be reproduced with the code you provided. However, based on your explanation, here are two things to consider:
An initial value of a flex container is flex-shrink: 1. This means that flex items are allowed to shrink in order to fit inside the container (preventing overflow). In order to disable shrinking, add flex-shrink: 0 to flex items.
Floats are ignored in a flex container.
Also, as general guidance, consider these rules, as well:
Absolutely positioned flex items do not participate in flex layout.
A flex item cannot, by default, shrink past the size of its content.
One of the factors above may be causing, or at least contributing, to your problem.
I was trying to create my portfolio page. I have 4 subheadings (About, Resume, Blog and Portfolio).
So I wanted to put these headings on top center of my div. So what I did was created an unordered list gave it property to display inline. Now all headings come to the same list.
Now I want to give spacing between the headings. Of course margin and padding options are there but is there any way in which I can avoid margin/paddings and do this directly by flex?(I wanted to reduce load on media queries for small screen)
The ul can be the flex container, and you can spread the elements evenly using justify-content: space-between:
.header {
display: flex;
width: 50%;
margin: 0 auto;
padding: 0;
justify-content: space-between;
list-style: none;
}
<ul class="header">
<li class="header__item">About</li>
<li class="header__item">Resume</li>
<li class="header__item">Blog</li>
<li class="header__item">Portfolio</li>
</ul>
you may use justify-content and eventually pseudo elements to squeeze elements to middle
nav {
display:flex;
justify-content:space-around;
}
/*increase space from side at first and last child */
nav:before,
nav:after {
content:'';
width:25vw;/* or % . tune this or remove pseudo if unneeded */
}
a {
margin:0 1em;
}
<nav>
About
Resume
Blog
Folio
</nav>