I am trying to make the header for a site but i have a issue when it comes to responsiveness on height.
And something i am not sure that it can be resolved with media queries breakpoints as you can see from the photo below.
and here is how it looks on full window
Html
<body>
<header class="header">
<div class="logo-box"></div>
<img src="/img/logo-white.png" class="logo">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our City
Discover our Tours
</div>
</header>
</body>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
}
.header{
height:65vh;
background-image: linear-gradient(to right bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
background-size: cover;
background-position: top;
background-color:#4FD1A9;
}
.logo-box{
position: absolute;
top:40px;
left:40px;
}
.logo{
height:35px;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
}
.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 15px;
margin-bottom: 60px;
}
.text-box {
display: inline-block;
position: absolute;
top:30%;
left:50%;
transform: translate(-50% ,-50%);
text-align: center;
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding:15px 40px;
display: inline-block;
border-radius: 100px;
transition: all .2s;
margin: 5px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgb(0,0,0,.2);
}
.btn:active {
transform: translateY(-1px) ;
}
.btn-white {
background-color: #fff;
color:#777;
}
Should i make the entire header with CSS grid Layout breaking it its own parts?
My solution is somewhat opinionated, but I think that's unavoidable for this kind of question as there's so many different ways that it could be done.
I take the view that the height of elements should be determined only by their contents. If it was the case that users were comfortable scrolling horizontally as well as vertically through a website, then responsive design would be a complete non-issue. Responsive Design only becomes necessary because we prevent horizontal scrolling. We should not therefore concern ourselves with the height of content, only with the width.
Accordingly, I've removed the fixed height from the header as well as the absolute positioning from some of the elements and allowed the content to be laid out according to the natural flow. For desktop, I think this works fine.
A slightly different approach is required for narrower screens since on these you do begin to have issues with the width of the content. My solution here is to introduce a break-point at around the point when the content starts to get too wide for the viewport. Then I set all dimensions - font-sizes, margins, padding etc - to be a proportion of the current viewport width. A little math is required here to calculate the correct values, and I've also used CSS Custom Properties to make things a bit DRYer. In fact, there's only one declaration within the media query, and that's to set the base-unit from which all other values are calculated.
I've made notes in the CSS giving the reasoning for some of the changes I've made.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
}
.header {
--unit: 1px;
/* removing this since the height of an element should be determined by content */
/* height:65vh;*/
background-image: linear-gradient(to right bottom, rgba(132, 248, 198, 0.8), rgba(26, 187, 137, 0.8)), url(https://s.abcnews.com/images/Business/gty_detroit_mi_130718_4x3_992.jpg);
background-size: cover;
background-position: center;
background-color: #4FD1A9;
/*
* flexbox is the best way to layout content along a single axis
* for various practical and performance reasons
*/
display: flex;
}
.text-box {
--padding-v: calc(var(--unit) * 50);
--padding-h: calc(var(--unit) * 10);
display: inline-block;
padding: var(--padding-v) var(--padding-h);
/* This content should just be in the normal flow of the page */
/*
position: absolute
top:30%;
left:50%;
transform: translate(-50% ,-50%);
*/
text-align: center;
/* Because we're using flexbox, we can center the content both horizontally and vertically
* using this declaration
*/
margin: auto;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
}
.heading-primary-main {
--font-size: calc(var(--unit) * 60);
--letter-spacing: calc(var(--unit) * 35);
display: block;
font-size: var(--font-size);
font-weight: 400;
letter-spacing: var(--letter-spacing);
}
.heading-primary-sub {
--font-size: calc(var(--unit) * 20);
--letter-spacing: calc(var(--unit) * 15);
--margin-bottom: calc(var(--unit) * 60);
display: block;
font-size: var(--font-size);
font-weight: 700;
letter-spacing: var(--letter-spacing);
margin-bottom: var(--margin-bottom);
}
.btn {
--padding-v: calc(var(--unit) * 15);
--padding-h: calc(var(--unit) * 40);
--border-radius: calc(var(--unit) * 100);
--margin: calc(var(--unit) * 5);
--font-size: calc(var(--unit) * 16);
font-size: var(--font-size);
text-transform: uppercase;
text-decoration: none;
padding: var(--padding-v) var(--padding-h);
display: inline-block;
border-radius: var(--border-radius);
transition: all .2s;
margin: var(--margin);
background-color: #fff;
color: #777;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgb(0, 0, 0, .2);
}
.btn:active {
transform: translateY(-1px);
}
/*
* This is around the point at which the text starts to wrap
*
* We take a fundamentally different approach to layout here. Now we want dimensions to
* scale with the width of the viewport so that it will look good at all sizes
*/
#media only screen and (max-width: 550px) {
.header {
--unit: calc(100vw / 550);
}
}
<html>
<head>
<link href="./header.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our City
Discover our Tours
</div>
</header>
</body>
</html>
Use media-quires to adjust your layout.
Problem occurs due to position:absolute
Reference
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
}
.header{
height:65vh;
background-image: linear-gradient(to right bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
background-size: cover;
background-position: top;
background-color:#4FD1A9;
}
.logo-box{
position: absolute;
top:40px;
left:40px;
}
.logo{
height:35px;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
}
.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 15px;
margin-bottom: 60px;
}
.text-box {
display: inline-block;
position: absolute;
top:30%;
left:50%;
transform: translate(-50% ,-50%);
text-align: center;
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding:15px 40px;
display: inline-block;
border-radius: 100px;
transition: all .2s;
margin: 5px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgb(0,0,0,.2);
}
.btn:active {
transform: translateY(-1px) ;
}
.btn-white {
background-color: #fff;
color:#777;
}
#media only screen and (max-width: 767px) {
.header {
height: 100vh;//adjust as per your req
}
.text-box {
display: block;
position: relative;
top: 0;
left: 0;
transform: none;
text-align: center;
height: 100%;
}
}
<body>
<header class="header">
<div class="logo-box"></div>
<img src="/img/logo-white.png" class="logo">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our City
Discover our Tours
</div>
</header>
</body>
Related
I'm building my first proper website from stratch and I've been using some of your responses which have been really helpful so thanks to everyone :)
I just have a question, but will probably have more in the future.
I would like the website to be responsive and I already put the viewpoint code, however the text itself is not responsive and due to this, when you reduce the size of the screen there is a white patch at the right side of the page that shouldnt be there. I was wondering if anyone could help me find out whats wrong with my code.
Thanks!
/* Text properties */
body {
font-family: 'Futura', sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
}
h1 {
position: relative;
left:70vw;
top:30vh;
text-align: right;
font-size: 3em;
color: white
}
h2 {
font-family: 'Roboto', sans-serif;
position: relative;
left:70vw;
top:28vh;
text-align: right;
font-size: 2em;
color: white
}
h3 {
position: relative;
left:70vw;
top:28vh;
text-align: right;
font-size: 14px;
color: white
}
h4 {
position: relative;
font-family: 'Arial';
left:70vw;
top:27vh;
text-align: right;
font-size: 14px;
color: white
}
a {
color: #FFFFFF;
}
p {
margin: 0;
padding: 0;
}
.bg {
/* The image used */
background-image: url("https://eskipaper.com/images/dark-background-4.jpg");
/* Full height */
height: 96vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#title
{
position: absolute;
}
.footer p
{
padding-top: 6px;
font-size: 12px;
}
.footer {
margin: 0px;
Height:30px;
width:100%;
background-color: black;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="C:\Users\Tola\Documents\Tola Photography\Landing Page\style.css" rel="stylesheet">
<title>Tola Akindipe</title>
</head>
<body>
<div class="bg">
<div id="title">
<h1>Tola Akindipe</h1>
<h2>Photography</h2>
<h3><a href="/TolaMobile"style="text-decoration: none;" >Mobile Portfolio </a> <a href="/TolaDSLR"style="text-decoration: none;" > DSLR Portfolio</a></h3>
<h4><a href="/contact" style="text-decoration: none;" >Contact</a></h4>
</div>
</div>
<div class="footer">
<p>Copyright 2020 # Tola Akindipe - All Rights Reserved</p>
</div>
</body>
</html>
Try to change your CSS to this:
/* Text properties */
body {
font-family: 'Futura', sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
height: 100%;
width: 100%;
}
h1 {
text-align: right;
font-size: 3em;
color: white
}
h2 {
font-family: 'Roboto', sans-serif;
text-align: right;
font-size: 2em;
color: white
}
h3 {
text-align: right;
font-size: 14px;
color: white
}
h4 {
font-family: 'Arial';
text-align: right;
font-size: 14px;
color: white
}
a {
color: #FFFFFF;
}
p {
margin: 0;
padding: 0;
}
.bg {
/* The image used */
background: url("https://eskipaper.com/images/dark-background-4.jpg") center center no-repeat;
/* Screen Height - Footer Height */
height: calc(100vh - 30px);
/* Set The Background Size */
background-size: cover;
/* Align The Content To The Center */
display: flex;
justify-content: center;
align-items: center;
}
.footer p {
padding-top: 6px;
font-size: 12px;
}
.footer {
margin: 0px;
Height: 30px;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
I am trying to achieve a similar search form like tripadvisors (at least UI and Front Design speaking) but i have till now a few issues.
On the first photo is how is my search bar with the class name for testing purposes "asdf".
so in the second picture we have the issue, the expandable part of the form being a bit wider than the input search field.
In the third pict if with have the issue if i try to assign the same width of the rest of the form with the input["text"] field of the search form.
Below my basic html and css code.
HTML
<div class="aboutUs">
<div class="textFlexContainer">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where summer happens</span>
</h1>
<form class="search-box" action="/search">
<input class="asdf" type="search" placeholder="Explore City">
<div class="search-page">
<h3>Explore City</h3>
<ul class="search-menu-list">
<li>Our Daily Suggestions</li>
<li>Shopping</li>
<li>City Tours</li>
<li>Restaurants</li>
<li>Events</li>
<li>Things to do</li>
</ul>
<h3>Recently Reviewed</h3>
</div>
</form>
</div>
</div>
</div>
And CSS
.search-box{
display: block;
position: relative;
overflow: hidden;
z-index:15;
padding:2rem;
}
.asdf {
width: 80%;
padding:2rem;
border: none;
outline: none;
border-bottom:2px solid white;
margin-top:2.5rem;
font-size: inherit;
background-color: green;
color: #fff;
}
h3{
color:#fff;
margin-top:2rem;
}
.search-page {
height: fit-content;
background-color:green;
text-align: center;
padding:4rem 0;
transition: all 300ms ease-in-out;
display: none;
}
.search-page.visible {
display: block;
transition: all 300ms ease-in-out;
}
.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.search-page .search-menu-list li{
list-style: none;
}
.search-page .search-menu-list li a:hover{
transform: translateY(-1rem);
}
.search-page .search-menu-list li a{
display: inline-block;
color:#fff;
padding:5px;
list-style: none;
text-decoration: none;
margin-right: 2.5rem;
transition: all 300ms ease-in-out;
border: solid 2px white;
border-radius: 1rem;
padding: 11px 13px 11px 14px;
margin: 10px;
}
.aboutUs{
display: grid;
background-image: linear-gradient(to right bottom, rgba(53, 170, 120, 0.8), rgba(20, 139, 102, 0.8)) ,url(../img/ch4.jpg);
background-size: cover;
background-position: center;
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
}
.textFlexContainer{
display:flex;
align-self: center;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.8rem;
}
.text-box {
display: inline-block;
/* This content should just be in the normal flow of the page */
/*
position: absolute
top:30%;
left:50%;
transform: translate(-50% ,-50%);
*/
text-align: center;
/* Because we're using flexbox, we can center the content both horizontally and vertically
* using this declaration
*/
margin: auto;
}
Additionaly i would love if when i click on the search bar field and the form is expanding to not have the letters above the search bar to getting squeezed on the top.
Not entirely sure what you need here but here's a fix for image 3. Adding 2 lines of code to your .search-page fixes the alignment issue.
.search-page{
height: fit-content;
background-color:green;
width:80%;
text-align: center;
padding:4rem 0;
transition: all 300ms ease-in-out;
display: all;
}
The width sets it to line up with the size of the text input of the form. The margin: 0 auto; is a good way to quickly center elements in css.
I can't see the expandable part when I tested your code but have you tried changing the width to become small and then do a margin-left to move de expandable part and align it with the search?
I am trying to get the Texas icon directly centered between the span and h1 element.
Here is the Screen Capture
I tried googling but I think I might be phrasing what I need poorly. Is it that I have to adjust the padding and margin in css? I just want to move the icon down the y-axis.
Thank you
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0"></a>
</div>
<h1>Austin</h1>
.main-header {
padding-top: 170px;
height: 850px;
background: linear-gradient(lightblue, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('https://media.giphy.com/media/3ohs7I9ho0H4dfeP7y/giphy.gif') no-repeat center;
background-size: cover;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200px;
padding-bottom: 10px;
}
h1 {
font-size: 12.5rem; /* 90px/16px */
color: rgba(255, 255, 255, 1);
text-transform: capitalize;
font-weight: normal;
text-align: center;
line-height: 1.3;
margin: 12px 0px 0px;
}
I think text-align:center is enough in your case, then simply play with margin of elements to create the spaces :
header {
background: blue;
text-align: center;
color: #fff;
max-height: 380px;
padding: 50px 25px 0px;
}
.title {
margin: 5px 0;
font-size: 1.3rem;
border: none;
display: inline-block;
}
h1 {
margin: 10px 0;
font-size: 5rem;
line-height: 1.1;
}
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0">
</div>
<h1>Austin</h1>
</header>
Thank you for the support. Unfortunately, none of the solutions worked but I decided just to change the line height of the h1 element and was able to get the result I wanted. I learned so many new things from the responses to my question. Again, thank you.
Updated Screen Capture
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
UPDATE: Here's a Fiddle: https://jsfiddle.net/720v4zdy/8/
I'm customizing a tumblr blog to match someone's site and it's almost in good shape. We started with a theme that already matched it closely and then made some changes in CSS.
The last problem I can't solve is how to make the navigation bar stretch the entire page while containing all of the links in a max-width of 1024px.
Here's the tumblr blog WIP: http://craftysheepblog.tumblr.com/
I want the navigation bar to stretch the entire page, but the links to be contained with a max-width of 1024px. The trouble here is I only have one DIV to do this with, so I'm not quite sure how to make it happen.
I'm using this currently, which works somewhat. It gets ugly when you make the browser window smaller though.
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
width: 100%;
}
You can set the nav to max width: 1024px and fill the "gaps" on the sides with ::before and ::after pseudo elements. You'll need to hide the overflow on header#top to avoid sideways scrolling, because the pseudo elements are set wider than the content.
This does rely on you setting the height of your nav and following suit with the <a> (height, line-height, etc.) ...
Also - tweak some more; there is a 600px break point in your CSS on the live site that will interfere with this (along with a lot of your extra CSS that I didn't clean up).
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
margin: 0;
}
#top {
overflow: hidden;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
max-width: 1024px;
margin: 50px auto 20px;
height: 50px;
width: 100%;
border-width: 0;
padding: 0;
position: relative;
}
#top nav::before{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
right: 100%;
}
#top nav::after{
background: rgb(45,50,51);
content: "";
display: block;
position: absolute;
height: 50px;
width: 100%;
left: 100%;
top: 0;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
border: 0;
display: inline-block;
padding: 0 1em;
margin: 0;
height: 50px;
line-height: 50px;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<nav>
<a class="page" href="#">Link 1</a><a class="page" href="#">Link 2</a><a class="page" href="#">Link 3</a>
</nav>
</div>
</div>
</header>
How about using max-width: 1024px;
The best way to do this is to use a ul inside of a div as your navigation bar. The ul can contain all of your links. That way, the div can have a width that spans the entire page while the unordered list has a max width of 1024px.
Example code:
<html>
<head>
<style>
#nav {
width: 100%;
height: 20%;
}
#nav-links {
max-width: 1024px;
}
</style>
</head>
<body>
<div id="nav">
<ul id="nav-links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>...</li>
</ul>
</div>
</body>
</html>
Then you can style your ul as a nav bar however you like. Here's a good link for that: http://www.w3schools.com/css/css_navbar.asp
With the amount of information you have shared it is hard to say. Obviously the cleanest way to accomplish this is to insert another element (div or otherwise) around these child elements, and assign it a max-width... however this does not sound as if it is an option for you?
If you know how many elements you want to make up the 1024px, you could assign their widths manually (i.e. give each of the four children a width of 256px, or something similar).
If you do not know any of these things, and your options for the space are limited, Javascript is your best option. You could write a script that counts the children, and either assigns their widths appropriately or inserts clears at the proper location.
If you expand your question to target a specific approach, I'm sure myself and the many gurus on here will be able to give you more specific guidance.
Use flexbox: https://philipwalton.github.io/solved-by-flexbox/
The links should stretch as normal but start to shrink when they each exceed 341px which is 1023px as a total width.
Note: Snippet best viewed in Full Page mode.
Relevant CSS
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
body {
color: rgb(38, 39, 43);
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
font-size: 14px;
line-height: 1.42857143;
}
.row {
max-width: 100%;
}
#top {
margin-top: 0px;
}
#top .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 30px;
text-align: left;
font-weight: lighter;
margin-top: 18px;
display: block;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#top nav {
background-color: rgb(45, 50, 51);
color: white;
text-align: left;
padding: 11px 22%;
margin-top: 20px;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
}
#top nav a {
border-bottom: 1px solid rgba(255, 255, 255, 0);
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
margin: 0px 15px;
flex: 0 1 341px;
}
#top nav a {
color: #fff;
font-size: 13px;
text-transform: none;
text-decoration: none;
font-family: "Open Sans", "sans-serif", Arial;
font-weight: 300;
}
#top nav a:hover {
color: #52A708;
}
#top .headimg {
display: none;
}
#posts {
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.column,
.columns {
padding: 0;
}
#posts article:nth-child(1) {
padding-top: 20px;
}
#posts article .title {
font-family: "Open Sans", "sans-serif", Arial;
font-size: 36px;
color: rgb(38, 39, 43);
text-align: center;
font-weight: 500;
}
#posts article footer {
display: none;
}
#paginate {
display: none;
}
#bottom {
border: none;
}
#bottom {
border: none;
max-width: 1024px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
<header id="top">
<div class="row">
<div class="small-12 small-centered columns">
<img class="headimg" src="http://assets.tumblr.com/images/x.gif?v=1">
<a href="/" class="active">
<div class="title">Page Title</div>
</a>
<div class="description"></div>
<nav>
<a class="page" href="/online-store">Shop NAO</a><a class="page" href="/nao-couture">NAO Couture</a><a class="page" href="/nao-experience">NAO Experience</a>
</nav>
</div>
<!--.columns-->
</div>
<!--.row-->
</header>