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.
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>
right now the purple just covers the text but it should be a nice block of colour like the dropdown is. Also, I have a bar under my nav img that should not be there when I hover. I know it is a width/height thing, but no matter where I put the code it does not work.
https://codepen.io/Smoki248/pen/NWxrOWK
li {
list-style: none;
}
a {
color: #f2f2f2;
text-decoration: none;
}
a:hover {
background-color: #8781bd;
}
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 400;
font-family: "Amatic SC", Roboto, sans-serif;
border: 1px #8781bd solid;
border-radius: 2px;
background: #8781bd;
color: #f2f2f2;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 0px;
display: flex;
align-items: center;
background-color: #2f2f2f;
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width:650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
h1 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 35pt;
width: 100%;
text-align: center;
}
h2 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 24pt;
width: 100%;
text-align: center;
}
nav li {
padding-bottom: 30px 0px;
}
nav > ul {
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
.dropdown > li{
float: right;
overflow: hidden;
}
.dropdown > li a {
font-size: 16px;
border: none;
outline: none;
color: #f4f4f4;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav > li a:hover, .dropdown:hover a {
background-color: #8781bd;
color:#f4f4f4;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: #f4f4f4;
z-index: 1;
margin-top: 20px;
min-width: 100px;
}
.dropdown-content li a {
float: none;
color: #f4f4f4;
padding: 10px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #625aa9;
color: #f4f4f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header id="page-wrapper">
<header id="header">
<div class="logo">
<nav>
<a href="http://www.wrecklessdevelopment.com"><img id="header-img"
src="images/wreckless-development-logo.gif" alt="Wreckless Development Logo"/></a>
</nav>
</div>
<h1>Wreckless Development</h1>
<nav id="navbar">
<ul>
<li>About</li>
<li>Services</li>
<div class="dropdown">
<li><i class="fa fa-caret-down"></i> Portfolio<li>
<div class="dropdown-content">
<ul>
<li>Photography</li>
<li>Composite</li>
<li>Logos</li>
<li>Branding</li>
<li>Advertising</li>
</ul>
</div>
</div>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
</header>
The problem is tag a's default display is inline, so if you want to adjust height of a tag, you have to change it's default display to display: inline-block like this, and then you may be able to do whatever you want with that a tag, you can refer my code below for more details:
#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}
you can take a look in my codepen.io for more details here. Hope it will help
Hope someone can help me here.
I initially design the web page for a desk top.
now I am trying to gracefully - degrade, and add features for smaller screens.
What happens now, is that the navbar does not show up at all.
the header is a flex container that has 2 nested flex containers within it.
The one on the right is supposed to display, unless the screen goes below 376px.
I am not sure why...
.nav-container {
flex-direction: column;
display: flex;
width: 100vw;
max-width: 100%;
height: auto;
background-color: #0092FF;
}
header {
display: flex;
width: 100%;
height: 80px;
flex-direction: row;
flex-shrink: 0;
top: 0px;
}
header nav .logo {
float: left;
margin-left: 6.25em;
margin-top: 22px;
width: 215px;
height: 40px;
}
header nav .menu .menu-item {
display: none;
/* position: absolute;
z-index: 100;
*/
}
#media screen and (min-width:23.5em) {
header nav .menu {
display: inline-block;
display: flex;
margin-right: 6.25em;
margin-top: 0;
justify-content: flex-end;
}
header nav .menu .menu-item .nav-link {
flex-direction: row;
padding-right: 60px;
display: inline-block;
margin-top: 31px;
font-size: 1.125em;
font: Semibold 18px/22px Proxima Nova;
align-items: center;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
text-decoration: none;
outline: none;
}
header nav .menu-item .login {
display: inline-block;
width: 104px;
height: 40px;
background-color: Transparent;
color: white;
border: 2px solid #fff;
border-radius: 40px;
text-align: center;
outline: none;
vertical-align: middle;
text-decoration: none;
font-size: 1.125em;
margin-top: 22px;
}
}
<div>
<header class="nav-container">
<nav>
<div class="logo"><img src="./images/overpass.svg" alt="overpass"></div>
<ul class="menu">
<li class="menu-item">Features</li>
<li class="menu-item">Pricing</li>
<li class="menu-item"><button type="button" class="login">Login</button></li>
</ul>
</nav>
</header>
</div>
To show up the navbar, you need to add this in your media query :
header nav .menu .menu-item {
display: block;
}
For more explanation :
header nav .menu .menu-item .nav-link = each element with nav-link class in header > nav > .menu > .menu-item
header nav .menu-item .login = each element with login class in header > nav > .menu-item
header nav .menu .menu-item = each element with menu-item class in header > nav > .menu
So, if you set display: none; for .menu-item then you have to set display: block; (or other) for the same item, not nav-link or login class
I have applied the suggestion from above. it works now:
.nav-container {
flex-direction: column;
display: flex;
width: 100vw;
max-width: 100%;
height: auto;
background-color: #0092FF;
}
header {
display: flex;
width: 100%;
height: 80px;
flex-direction: row;
flex-shrink: 0;
top: 0px;
}
header nav .logo {
float: left;
margin-left: 6.25em;
margin-top: 22px;
width: 215px;
height: 40px;
}
header nav .menu .menu-item {
display: none;
/* position: absolute;
z-index: 100;
*/
}
#media screen and (min-width:23.5em) {
header nav .menu {
display: inline-block;
display: flex;
margin-right: 6.25em;
margin-top: 0;
justify-content: flex-end;
}
header nav .menu .menu-item {
display: inline-block;
flex-direction: row;
margin-top: 1.94em;
}
header nav .menu .menu-item .nav-link{
padding-right: 60px;
font-size: 1.125em;
font: Semibold 18px/22px Proxima Nova;
align-items: center;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
text-decoration: none;
outline: none;
}
header nav .menu-item .login {
display: inline-block;
width: 104px;
height: 40px;
background-color: Transparent;
color: white;
border: 2px solid #fff;
border-radius: 40px;
text-align: center;
outline: none;
vertical-align: middle;
text-decoration: none;
font-size: 1.125em;
margin-top: -0.5em;
}
}
So I try to change li's vertical position but when I do the nav bar height is affected as well. What is the way to actually do that without affecting nav bar's height?
Here's the code:
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
What is your goal here? To have the content centered or...?
It may be better to use flexbox here rather than set the padding-left: 850px; on your ul (also on your ul you could've used display: block; margin: 0 auto; to center it.) If you'd like, you can give your ul a defined height and use align-items to specify how it should be aligned vertically.
body {
margin: 0;
}
nav {
background-color: #333;
display: flex;
justify-content: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
align-items: center;
}
li {
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<body>
<nav>
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</nav>
</body>
You can add position: relative; and a value for bottom or top- in my snippet bottom: 4px;:
This reserves the space originally taken by the element (without position: relative;), but moves the element according to the top/bottom/left/right settings, without affecting other elements.
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
position: relative;
bottom: 4px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>