Example of what the navigation bar should look like
I'm making my first website in html/css and I want to make a fixed navigation bar that can adapt to mobile screens. It should have a left aligned 'home' button and the rest of the buttons are center aligned. How can I make this with HTML/CSS? Thank you!
Here is my code at the moment:
body {
background-color: white;
margin:0;
}
li a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
ul {
list-style-type: none;
background-color: rgba(255, 255, 255, 0.4);
border: 1.5px solid rgba(0, 255, 255, 0.15);
backdrop-filter: blur(8px);
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
li {
display: inline-block;
}
li a {
text-decoration: none;
color: rgba(0, 0, 0, 0.60);
text-align: center;
padding: 12px 40px;
display: block;
transition:all 0.3s ease 0s;
text-align: center;
}
li a:hover {
color:black;
}
.left-links{
flex:1 1 200px;
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href="navBar.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<div>
<ul>
<div class="left-links">
<li>Home</li>
</div>
<nav>
<li>Work</li>
<li>Me</li>
<li>Play</li>
</nav>
</ul>
</div>
<body>
<h1>Hello</h1>
</body>
</html>
You can achieve what you want by changing flex:1 1 200px; to just flex: 0.5; under .left-links in your css file.
EDIT: Sorry I forgot to also tell you to add display: flex; to ul in your css file as well
I've altered the code a little, but this is how I would tackle it.
By placing each section of links that are related together in a flex-box div, and displaying the entire nav element itself as a flex. We can independently address each grouping of links, as well as the nav as a whole.
Adding the flex-grow to the .right-links will inherit the entirety of the remaining space left from the home button, and adding in justify-content: center; centers the .right-links in that remaining space. This will work across screen widths and reduces the clutter of using lists when they might not be needed.
Hope this helps!
body {
background-color: white;
margin:0;
}
a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
nav {
display:flex;
align-items:center;
list-style-type: none;
background-color: rgba(255, 255, 255, 0.4);
border: 1.5px solid rgba(0, 255, 255, 0.15);
backdrop-filter: blur(8px);
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.60);
text-align: center;
padding: 12px 40px;
display: block;
transition:all 0.3s ease 0s;
text-align: center;
}
a:hover {
color:black;
}
.left-links{
display:flex;
text-align: left;
}
.right-links{
justify-content:center;
flex-grow:1;
display: flex;
flex:1 1 200px;
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href="navBar.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<div>
<nav>
<div class="left-links">
Home
</div>
<div class="right-links">
<div>
Work
</div>
<div>
Me
</div>
<div>
Play
</div>
</div>
</nav>
</div>
<body>
<h1>Hello</h1>
</body>
</html>
Related
I am currently attempting to increase the width of the back-drop filler effect and I am confused on how to do it. The first picture is what I have and the second is what it should look like. I feel it possibly has something to do with increasing the width and height of my nav but when I tried it didn't work out. Could also have something to do with the fact I used absolute with the nav instead of using float but im so copnfused. Thanks.
This is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
This is the CSS code
body {
background-image: url(assets/home/background-home-desktop.jpg);
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
}
Hello i have rewrite your code to make an clean code on my version.
body {
background-color: black;
}
.wrapper_navbar {
display: flex;
flex-direction:row;
align-items: center;
}
.logo_navbar {
display: flex;
}
.img_logo {
width: 60px;
height: 60px;
}
hr {
width: 100%;
display: inline-block;
top: 75px;
}
.hr_line{
display:flex;
flex:auto;
}
.navbar {
display: flex;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
padding: 10px 17px;
justify-content: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
text-decoration: none;
color: #ccc;
}
li a {
display: block;
padding: 8px;
}
.item_nav {
margin: 0 5px;
}
<div class="wrapper_navbar">
<div class="logo_navbar">
<div class="logo">
<img src="https://img1.pngdownload.id/20171220/dxq/google-png-5a3aafee6ff5c8.9595681415137955664586.jpg" class="img_logo" />
</div>
</div>
<div class="hr_line">
<hr />
</div>
<div class="navbar">
<ul>
<li class="item_nav">Item 1</li>
<li class="item_nav">Item 2</li>
<li class="item_nav">Item 3</li>
</ul>
</div>
</div>
https://jsfiddle.net/dimaswahyu/ntg09e5b/86/
Here's a simple explanation. Every picture paints a thousand words...
I wanted to start creating a simple website and I am working on the navigation bar and the body now.
Here is the code and later on I will explain the issues.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
#p1 {
float: right;
}
#p2 {
float: right;
}
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<body>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
ISSUE 1:
The links are swapped, no matter what I did. Navigation link 1 and 2 are floated right, but navigation link 1 always ends up on the right, no matter how much I twist and turn the code.
ISSUE 2:
The navigation is clearly outside of the body but it still floats at the right side of the body and not of the entire html tag or the website.
ISSUE 3:
The body appears over the navigation bar, although it should definetely be under it.
This is driving me absolutely insane and i am looking for solutions.
Thanks in advance
You have some elements outside of <body></body>
do you really need float: right for the inside the .navbar?
since you are using percentage dimensions for the body, you'll need specify size of it's parent html element as well.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
/*
#p1 {
float: right;
}
#p2 {
float: right;
}
*/
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
/* added */
#navbar {
display: flex; /* removes gap between children */
}
html
{
width: 100vw;
height: 100vh;
background-color: pink;
}
body
{
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
I have made this website as a practice portfolio website for myself and my website is pushed to the left whenever its smaller than particular size. it used to be around 600px but I removed the whole code and rewrote the website again but I checked it at early phases and still suffers from this problem which I cant find the reason for it. so I stopped coding and came straight here for help.
please help me this is the third time I'm trying to build this website and still have this problem.
something else i noticed is that althoug i have scroll x hidden i still have this tiny scroll to left when resizing the website.enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: visible;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
color: rgb(218, 214, 214);
font-family: "Montserrat", sans-serif;
font-size: 1rem;
}
/*NAVBAR----------------------------------------------------------------------------------------*/
.navbar {
width: 100vw;
height: auto;
font-family: "Poppins", sans-serif;
font-weight: 500;
padding: 7px;
background-color: rgba(85, 85, 85, 0.116);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.icon-list {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.icon-list li {
text-align: center;
margin: 0 15px;
}
.icon-list a {
text-decoration: none;
color: rgb(180, 148, 158);
}
.icon-list a:hover {
opacity: 0.7;
}
.images {
width: 40px;
height: 40px;
}
/*INFO---------------------------------------------------------------------------------*/
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px;
text-align: center;
}
.info p {
margin: 0 40px;
line-height: 20px;
}
.info h1 {
font-weight: 600;
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
.info h2 {
color: rgb(192, 184, 153);
font-weight: 400;
}
.info h3 {
color: crimson;
font-weight: 500;
margin-top: 30px;
margin-bottom: 10px;
}
.shadow {
width: 80vw;
background-color: rgba(34, 33, 33, 0.336);
padding: 10px;
border-radius: 10px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,600;0,700;0,800;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashkan Naeimipoor</title>
</head>
<link rel="stylesheet" href="./main.css">
<body>
<nav class="navbar">
<ul class="icon-list">
<li><img class="images" src="./images/navbar/home.png" alt=""><br>HOME</li>
<li><img class="images" src="./images/navbar/resume.png" alt=""><br>GET RESUME</li>
<li><img class="images" src="./images/navbar/about.png" alt=""><br>ABOUT</li>
<li><img class="images" src="./images/navbar/contact-book.png" alt=""><br>CONTACT</li>
</ul>
</nav>
<div class="container">
<div class="info">
<div class="shadow">
<h1>Ashkan Naeimipoor</h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for
producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope
while working in the team of experts under a
skillful and talented management.</p>
</div>
</div>
</div>
</body>
</html>
Check your .info class, you are using 100px on padding. That's too large in smaller screen. You can reduce it using media query.
I'll also suggest changing .info class into:
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px 0;
text-align: center;
max-width: 1060px;
margin: 0 auto;
}
I want to extend the width of the background to that of the viewport and its height equal to the content I'm putting inside it. As you can see, I've set the width of .bgcont in CSS to 100vw and height: 100% but it's still not extending to it. Please also help with the height. I want the background's height to end just below the 2 buttons I've added.
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background-image: -moz-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -webkit-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -ms-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100% ;
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="container bgcont" >
<nav class="d-flex flex-row">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
Width issue
For the width issue, it's just a matter of adding the following:
header .bgcont {
…
max-width: none;
}
Keep in mind, though, that this line is overriding rules inside of _grid.scss for various breakpoints:
Height issue
For the height to end just below the two buttons you've added, remove the height rule in .bg-cont. To give things a bit of breathing room, I added a touch of bottom padding as well.
Demo
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
max-width: none; /* Overrides existing rules defined in _grid.scss */
background-image: -moz-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -webkit-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -ms-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
padding-bottom: 1.5em; /* <-- Added to make things look nice */
/* height: 100% /* /* <-- Removed this */
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="container bgcont" >
<nav class="d-flex flex-row">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
Its a bootstrap related issue. Actually you are using container class which is meant for fixed width grid.
You suppose to use container-fluid instead.
You have added the bg in the container, width: 1140px. For this reason it is not covering the full area. and for the height, in fullscreen view the height is covering 100% of the viewport.
Refer to the screenshot
Class container it's used for a web with a max width.
Class container-fluid it's for web that uses full width.
When using container it's supposed you will change max-width to set what your design has
Simply use min-height instead of height to include the button on small screens and remove container class to have full width:
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
/* don't need this
body{
overflow-x: hidden;
}
*/
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background-image:linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0;
top: 0;
width: 100%; /*don't use vw to avoid including scrollbar in the width*/
min-height: 100% ;
padding-bottom:50px;
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="bgcont px-2" > <!-- used px to add some padding like done by container -->
<nav class="d-flex flex-row">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
You can also optimize your code and rely on Bootstrap classes. I have also used gradient to have a better curve at the bottom:
html{
font-family: sans-serif;
}
header a{
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background:
radial-gradient(55% 100px at top,transparent 93%,#fff 95%) bottom/100% 100px no-repeat,
linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
padding-bottom:30px;
}
nav ul{
list-style: none;
padding: 0;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
font-size: 14px;
font-weight: bold;
}
#media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
#media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="bgcont px-2 pt-1 min-vh-100" >
<nav class="d-flex justify-content-between align-items-center">
<h1 class="sling mb-0">Sling</h1>
<ul class="mb-0 d-flex align-items-center">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Testimonial</li>
<li>Download</li>
<li>News</li>
<li>Contact us</li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>