If I am using
display: flex;
align-items: center;
how to make horizontal align of ul to right?
.navigation {
display: flex;
align-items: center;
width: 100%;
height: 80px;
background: rgb(255, 255, 255);
}
ul {
list-style: none;
/*float:right;*/
}
li {
display: inline-block;
}
a {
padding: 10px;
width: 80px;
text-decoration: none;
display: block;
text-align: center;
}
<div class="navigation">
<ul>
<li><a>Contacts</a></li>
<li><a>About</a></li>
<li><a>FAQ</a></li>
<li><a>Other</a></li>
</ul>
</div>
You can do this with justify-content: flex-end on .navigation
.navigation {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 80px;
background: rgb(255, 255, 255);
}
ul {
list-style: none;
display: flex;
padding: 0;
}
a {
padding: 10px 25px;
width: 80px;
text-decoration: none;
text-align: center;
}
<div class="navigation">
<ul>
<li><a>Contacts</a></li>
<li><a>About</a></li>
<li><a>FAQ</a></li>
<li><a>Other</a></li>
</ul>
</div>
Add flex-direction: row-reverse; to .navigation
.navigation {
display: flex;
align-items: center;
width: 100%;
height: 80px;
background: rgb(255,255,255);
flex-direction: row-reverse;/* Here is what you are looking for*/
}
ul {
list-style:none;
border:1px solid black;
}
li {
display:inline-block;
}
a {
padding: 10px;
width: 80px;
text-decoration: none;
display: block;
text-align: center;
}
<div class="navigation">
<ul>
<li><a>Contacts</a></li>
<li><a>About</a></li>
<li><a>FAQ</a></li>
<li><a>Other</a></li>
</ul>
</div>
Related
For some reason, I can't move my text to the middle of my div. I have text-align: center; and justify-content: center; but it still stays at the top of my div, and won't move unless I force it to where I want it to go.
body {
margin: 0px;
}
.top-nav {
background-color: gray;
display: flex;
justify-content: left;
}
ul {
list-style: none;
display: block;
}
li {
padding: 10px;
margin-left: -30px;
color: white;
}
.big-hero {
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
justify-content: center;
color: white;
}
<body>
<NAV class="top-nav">
<UL>
<LI>Home</LI>
<LI>About</LI>
<LI>Gallery</LI>
<LI>Calendar</LI>
<LI>Contact</LI>
</UL>
</NAV>
<div class="big-hero">
<h1>About Us</h1>
</div>
</body>
you have to use display:flex for the justify-content: center to work
try writing
.big-hero{
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
display:flex; /* add this*/
justify-content: center;
color: white;
}
Change justify-content: left; to center.
.top-nav{
background-color: gray;
display: flex;
justify-content: center;
}
body{
margin: 0px;
}
.top-nav{
background-color: gray;
display: flex;
justify-content: center;
}
ul {
list-style: none;
display: block;
}
li {
padding: 10px;
color: white;
}
.big-hero {
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
justify-content: center;
color: white;
}
<NAV class="top-nav">
<UL>
<LI>Home</LI>
<LI>About</LI>
<LI>Gallery</LI>
<LI>Calendar</LI>
<LI>Contact</LI>
</UL>
</NAV>
<div class="big-hero">
<h1>About Us</h1>
</div>
Add width: 100%; to your ul then simply add text-align: center; to your li's.
body {
margin: 0px;
}
.top-nav {
background-color: gray;
display: flex;
justify-content: left;
}
ul {
list-style: none;
display: block;
width: 100%;
}
li {
padding: 10px 0;
text-align: center;
color: white;
}
.big-hero {
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
justify-content: center;
color: white;
}
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Calendar</li>
<li>Contact</li>
</ul>
</nav>
<div class="big-hero">
<h1>About Us</h1>
</div>
I am trying to make this dropdown button using flexbox but it's not working as I want. It's not displaying when I hover around the button using display properties. Can someone edit this code so that the dropdown menu works?
Is this what you want
function Enable(){
x = document.getElementById("Ulist");
if(x.className == "display"){
x.className += " active";
}else{
x.className == "display";
}
}
li{
list-style: none;
}
.Maincover{
display: flex;
flex-direction: column;
align-items: center;
height: 300px;
}
button{
font-family: montserrat;
font-weight: 500;
width: 100px;
border-radius: 5px;
color: white;
border: 0px;
padding: 5px 10px;
text-align: center;
background-color: tomato;
}
.list{
font-family: rubik;
text-align: center;
margin-top: 10px;
}
.display{
padding:0px;
display: none;
}
.display.active{
display: block;
}
.hoverbutton:hover ~ .display{
display: block;
}
<div class="Maincover">
<button class="hoverbutton" onclick="Enable()">Hover Here</button>
<ul class="display" id="Ulist">
<li class="list" id="lists">List item 1</li>
<li class="list" id="lists">List item 2</li>
<li class="list" id="lists">List item 3</li>
</ul>
</div>
Here I have attached the html and css code for hoverable dropdown menu using flex.
.menu-area{
margin: 0;
padding: 0;
box-sizing: border-box;
width:150px;
display:flex;
flex-direction:column;
justify-content:center;
}
.menu-area a{
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: darkslategrey;
height: 60px;
font-family:Poppins;
font-weight: bold;
text-decoration: none;
}
.menu-area a:hover{
background: tomato;
color: #fff;
}
.menu-area ul{
list-style: none;
display: flex;
}
.menu-area li{
position: relative;
width: 100%;
text-align: center;
}
.menu-area li:hover .dropdown-1 > li{
display: block;
top: 0;
}
.dropdown-1 li{
display: none;
position: relative;
}
.dropdown-1{
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
}
.dropdown-1 li:hover .dropdown-2 li{
display: block;
}
.dropdown-2 li{
display: none;
}
.dropdown-2{
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
.banner-area{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://i.postimg.cc/Y0YM36yL/aa.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 60px);
}
.banner-area h1 {
text-transform: uppercase;
color: #fff;
font-size: 100px;
font-family: poppins;
letter-spacing: 2px;
}
<div class="menu-area">
<ul>
<li>Dropdown
<ul class="dropdown-1">
<li>service one</li>
<li>service two</li>
<li>service three
</li>
</ul>
</li>
</ul>
</div>
When I set the logo as a link, my menu moves to the right. When I inspect the menu, I see that I get an extra menu link to the left of the menu that is not visible otherwise and which leads to index.html Does anyone know what is the reason for this?
#logo {
height: 64px;
position: absolute;
left: 20px;
}
#menu {
display: flex;
flex-direction: row;
justify-content: center;
}
nav {
width: 100%;
background-color: #000000;
height: 64px;
display: flex;
flex-direction: row;
justify-content: center;
}
nav a {
text-align: center;
font-size: 25px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
color: white;
text-decoration: none;
transition: .9s;
}
nav a:hover {
background-color: orange;
transition: .9s;
}
<nav>
<div>
<img id="logo" src="https://via.placeholder.com/400x400.jpg" alt="">
</div>
<div id="menu">
<a href=index.html>Home</a>
<a href=index.html>About</a>
<a href=index.html>Contact</a>
</div>
</nav>
Change the css nav ato nav #menu a- Hope it fix the style.
#logo {
height: 64px;
position: absolute;
left: 20px;
}
#menu {
display: flex;
flex-direction: row;
justify-content: center;
}
nav {
width: 100%;
background-color: #000000;
height: 64px;
display: flex;
flex-direction: row;
justify-content: center;
}
nav #menu a {
text-align: center;
font-size: 25px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
color: white;
text-decoration: none;
transition: .9s;
}
nav a:hover {
background-color: orange;
transition: .9s;
}
<nav>
<div>
<img id="logo" src="https://via.placeholder.com/400x400.jpg" alt="">
</div>
<div id="menu">
<a href=index.html>Home</a>
<a href=index.html>About</a>
<a href=index.html>Contact</a>
</div>
</nav>
I am trying to create a simple web page and I want the links' background covers the whole space in navbar but it covers only the text around it.
My code is here:
.navbar {
width: 105%;
height: 5vw;
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
Any suggestions?
You can remove the height from the navbar class so, it'll take the available height. Also, you can add height to .navbar li (Optional, if you want to use some custom height).
.navbar {
width: 105%;
/*height: 5vw;*/
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
/*height: 100%;(Optional)*/
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
i don't understand exact your problem but if your problem with the default margin and padding its a solution
* {
padding: 0;
margin: 0;
}
.navbar {
width: 105%;
height: 5vw;
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
/*height: 100%;(Optional)*/
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
I have removed some unnecessary style from your code & build this using CSS display: flex; instead of float. Now .tab is covering full height with background.
Here is the working example:
.navbar {
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
}
.navbar li {
margin: 0;
padding: 0;
}
.navbar li a {
text-decoration: none;
color: black;
text-align: center;
padding: 10px;
display: block;
}
.tab {
background-color: grey;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
I'm trying to write the code for a fitness supplement webshop, and as I am making the navigation bar, this weird problem has come up. The unordered list is neither aligned vertically nor horizontally.
HTML:
<div class="menus">
<ul menuList>
<li>SUPPLEMENTER</li>
<li>ACCESSORIES</li>
<li>TØJ</li>
<li>ANDET</li>
</ul>
</div>
CSS:
.menus {
background-color: #00C9FF;
height: 42px;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
bottom: 0%;
}
.menus ul li {
list-style: none;
padding-left: 50px;
padding-right: 50px;
}
.menus ul {
display: flex;
flex-direction: row;
margin-top: auto;
}
.menus ul li a {
font-weight: 800;
font-style: italic;
font-size: 30pt;
text-decoration: none;
color: white;
}
If you needed this:
body {
margin: 0;
}
.menus {
background-color: #00C9FF;
height: 50px;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
bottom: 0%;
}
.menus ul li {
list-style: none;
padding-left: 50px;
padding-right: 50px;
}
.menus ul {
display: flex;
flex-direction: row;
margin-top: auto;
}
.menus ul li a {
font-weight: 800;
font-style: italic;
font-size: 30pt;
text-decoration: none;
color: white;
}
<div class="menus">
<ul menuList>
<li>SUPPLEMENTER</li>
<li>ACCESSORIES</li>
<li>TØJ</li>
<li>ANDET</li>
</ul>
</div>
Then the body margin was not set to 0 and the navbar needed a little bit more of height.
And yes... that code is not responsive.