* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #fff;
color: #333;
line-height: 1.5;
}
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fff;
position: fixed;
overflow: hidden;
}
.logo {
font-size: 1.5rem;
color: #333;
letter-spacing: 5px;
}
ul li {
list-style: none;
}
.nav-list-item {
color: #333;
text-decoration: none;
}
.nav-list {
display: flex;
justify-content: space-around;
<header>
<div class="logo">
<h3>My Name</h3>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>
I want to have a menu that is position at the center and have it fixed as i scroll down. but for some reason, after adding a position fixed to it. it breaks the actual alignment and i dont have any idea how to fix it.
Just add width: 100% to your header class:
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fff;
position: fixed;
overflow: hidden;
width: 100%
}
Related
im working in my final proyect to become a Web Developer, and im struggling with my footer, that is creating a minimum horizontal scroll and I cant find why.
I've been doing tests and I can't get rid of that horizontal scroll. An answer as soon as possible would be of great help to me, since this is my final project.
footer {
position: absolute;
bottom: 100;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100%;
padding-top: 40px;
color: #fff;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
h3 {
font-size: 2rem;
font-weight: 500;
text-transform: capitalize;
line-height: 4rem;
color: yellow;
}
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
li {
margin: 0 0px;
}
a {
text-decoration: none;
color: #fff;
padding: 5px;
&:hover {
color: rgb(255, 251, 0);
transition-duration: 1s;
}
}
}
.footer-bottom {
background: #000;
width: 100%;
padding: 20px;
padding-bottom: 40px;
text-align: center;
p {
display: flex;
justify-content: flex-start;
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
a {
color: yellow;
font-size: 16px;
text-decoration: none;
}
}
}
#media (max-width: 830px) {
.socials li {
font-size: 14px;
}
}
<footer>
<div class="footer-content">
<h3>KURT BURGERS</h3>
<ul class="socials">
<li>DEFENSA AL CONSUMIDOR</li>
<li>DELIVERY</li>
<li>POLITICAS DE PRIVACIDAD</li>
</ul>
</div>
<div class="footer-bottom">
<p>copyright © KURT BURGERS </p>
</div>
</footer>
I copied your code and removed the width:100% from .footer-bottom the horizontal scroll disappeared.
The reason why you get the scrollbar is because footer-bottom's width is 100% + the 20px padding you have set for each side of the element. If you add padding to an element with a width, the padding will be added on top of the width unless you set box-sizing: border-box;
You could add border-box to footer-bottom as a solution but what you should really do is remove the width 100% from footer-bottom because it is a block element already and it will take up the 100% width by default so there is no need to set it.
The same thing applies to the ul .socials, it has natural padding on the tag so when you set width 100% to it, it will be wider than 100%. In the case of this ul, I simply added padding: 0
In the below snippet, I have removed the width 100% from footer-bottom and I added some minor css to body so it is easier to see your content width.
body,
html {
padding: 0;
margin: 0;
}
footer {
position: absolute;
bottom: 100;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100%;
padding-top: 40px;
color: #fff;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 2rem;
font-weight: 500;
text-transform: capitalize;
line-height: 4rem;
color: yellow;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
}
.socials li {
margin: 0 0px;
}
.socials a {
text-decoration: none;
color: #fff;
padding: 5px;
}
.footer-bottom {
background: #000;
padding: 20px;
padding-bottom: 40px;
text-align: center;
p {
display: flex;
justify-content: flex-start;
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
a {
color: yellow;
font-size: 16px;
text-decoration: none;
}
}
}
#media (max-width: 830px) {
.socials li {
font-size: 14px;
}
}
<footer>
<div class="footer-content">
<h3>KURT BURGERS</h3>
<ul class="socials">
<li>DEFENSA AL CONSUMIDOR</li>
<li>DELIVERY</li>
<li>POLITICAS DE PRIVACIDAD</li>
</ul>
</div>
<div class="footer-bottom">
<p>copyright © KURT BURGERS </p>
</div>
</footer>
You are missing this from your styles:
* {
box-sizing: border-box;
}
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.
I'm kinda confused and tried out everything I'm able to try. Searching stack overflow I couldn't find the similar problem. So a little background, I'm trying to make a navigation menu with flexbox like in the picture down below, but I can't display link's border-bottom out of its parent div. Is it even possible?
This is what I want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
max-width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.header {
background: #44433e;
}
.header__menu {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.header__logo {
padding: 10px 0;
}
.menu__list {
display: flex;
list-style: none;
align-items: center;
}
.menu__item {
margin-left: 15px;
}
.menu__item:first-child {
margin-left: 0;
border-bottom: 3px solid #18cfab;
}
.menu__link {
display: inline-block;
font-family: "Montserrat-bold";
color: #b8b8b8;
font-size: 13px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
}
.menu__link-active {
color: #18cfab;
}
<header class="header">
<div class="header__wrap wrap">
<nav class="header__menu menu">
<div class="header__logo">
Logo
</div>
<ul class="menu__list">
<li class="menu__item">home</li>
<li class="menu__item">about</li>
<li class="menu__item">skills</li>
<li class="menu__item">service</li>
<li class="menu__item">work</li>
</nav>
</div>
</header>
You can achieve this using an :after element with a position: absolute:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
max-width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.header {
background: #44433e;
}
.header__menu {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.header__logo {
padding: 10px 0;
}
.menu__list {
display: flex;
list-style: none;
align-items: center;
}
.menu__item {
margin-left: 15px;
position: relative;
}
.menu__item:first-child {
margin-left: 0;
}
.menu__item:first-child:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background-color: #18cfab;
}
.menu__link {
display: inline-block;
font-family: "Montserrat-bold";
color: #b8b8b8;
font-size: 13px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
}
.menu__link-active {
color: #18cfab;
}
<header class="header">
<div class="header__wrap wrap">
<nav class="header__menu menu">
<div class="header__logo">
Logo
</div>
<ul class="menu__list">
<li class="menu__item">home</li>
<li class="menu__item">about</li>
<li class="menu__item">skills</li>
<li class="menu__item">service</li>
<li class="menu__item">work</li>
</nav>
</div>
</header>
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: white;
}
.zindex {
position: absolute;
left: 50%;
top: 15px;
z-index: 2;
}
#logo {
padding-bottom: 20px;
}
.center {
display: flex;
align-self: center;
}
.bodyclass {
background-color: #05426E;
height: 160px;
}
.content-container {
border-style: solid;
border-width: 5px;
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
margin-bottom: 15%;
}
.footer-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
#flexstart {
display: flex;
justify-content: flex-start;
align-items: center;
}
#flexend {
display: flex;
justify-content: flex-end;
align-items: center;
}
.centernav {
display: flex;
justify-content: center;
justify-items: center;
justify-self: center;
text-justify: center;
}
.snip1226 {
font-family: 'Raleway', Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-weight: 500;
color: black;
}
.snip1226 * {
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
color: black;
}
.snip1226 li {
list-style: outside none none;
margin: 0 1.5em;
overflow: hidden;
color: black;
}
.snip1226 a {
padding: 0.3em 0;
position: relative;
display: inline-block;
letter-spacing: 1px;
margin: 0;
color: white;
text-decoration: none;
}
.snip1226 a:before,
.snip1226 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1226 a:before {
bottom: 100%;
display: block;
height: 3px;
width: 100%;
content: "";
background-color: #FCDA18;
}
.snip1226 a:after {
padding: 0.3em 0;
position: absolute;
bottom: 100%;
left: 0;
content: attr(data-hover);
white-space: nowrap;
}
.snip1226 li:hover a,
.snip1226 .current a {
transform: translateY(100%);
}
import React from 'react';
import logo from "./logo.gif";
const Navbar = () => {
return <div className="bodyclass">
<header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
<nav class="f6 fw6 ttu tracked">
<div>
<ul id='flexstart' class="snip1226">
<li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a></li>
<li>About Us</li>
<li>Blog</li>
<img src={logo} height="125px" className='zindex' />
</ul>
<div id='flexend'>
<ul id='flexend' class="snip1226">
<li><a href="#" data-hover="Home" className='centernav'>Home</a></li>
<li>About Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
</header>
</div>;
}
export default Navbar;
React
I am trying to center the list items horizontally centered, but no matter what I do with CSS it remains like that. I know it has something to do with flex-end and flex-start, but I cannot figure out how to center it. I have tried both the align and justify properties but it doesn't seem to do anything.
I would also like to add that I want the elements to be all in one row that is centered within the navigation bar. I have to leave room inbetween them because the logo goes in the middle.
To horizontally center the contents your your lists (menus), this should be achievable by making the following adjustments to your CSS:
#flexstart {
display: flex;
/* justify-content: flex-start; Remove */
justify-content: center;
align-items: center;
}
#flexend {
display: flex;
/* justify-content: flex-end; Remove */
justify-content: center;
align-items: center;
}
For a working jsFiddle, please see this link (note I set background to black to make contents visible)
Update #2
To center vertically, you can make the following adjustments:
CSS:
/* Add this rule */
#flex-wrap {
display:flex;
flex-direction:row;
justify-content:center;
}
ul {
padding:0;
margin:0;
}
HTML:
<nav class="f6 fw6 ttu tracked">
<!-- UPDATE add id flex-wrap -->
<div id="flex-wrap">
<ul id='flexstart' class="snip1226">
<li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a>
Newly updated jsFiddle #2 here