I'm having issues trying to align these 2 divs (background and home-card). I changed the html nesting but I can't find the right way to make them stack on top of each other (home-card under background div).
I want the home-card to sit under background, both filling the remaining viewport.
flex-direction: column has no effect and I feel a bit lost to be honest. It is my first time using flexbox from scratch even though I've read about it, I still have troubles when practicing.
As you can see on fullscreen snippet run, these 2 divs are next to each other. I guess flex-grow is causing me layout issues, but I couldn't find a better way to make the background div fill the whole remaining space.
Any help is appriciated. Sorry for posting the whole code but I had to provide you the right context.
#import url(https://fonts.googleapis.com/css?family=Montserrat:00,500,600,700|Open+Sans:400,400i,600);
#import url(https://cdn.jsdelivr.net/npm/et-line#1.0.1/style.css);
/* Global Tweaks */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: 0
}
body {
font-size: 1.2em;
color: #777;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif
}
.page-container {
display: flex;
}
.main-menu, h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, sans-serif
}
a {
text-decoration: none;
cursor: pointer;
color: #212121;
display: block;
height: 100%;
}
a:focus, a:hover, a:visited {
text-decoration: none;
outline: 0
}
/* Global Tweaks */
/* Side Menu*/
a:active {
background-color: #333;
}
.logo {
padding-top: 25%;
}
nav {
height: 100vh;
width: 25vh;
box-sizing: border-box;
}
nav ul li {
position: relative;
width: 100%;
}
nav ul li a:before {
position: absolute;
content: '';
background-color: #e2e2e2;
height: 2px;
width: 100%;
left: 0px;
}
nav ul li:first-child a::before {
display: none
}
.main-menu {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-menu li {
height: 100%;
text-align: center;
background-color: #f7f7f7;
}
nav ul li a i {
width: 100%;
padding-top: 25%;
padding-bottom: 5%;
color: #838383;
font-size: 2em;
}
a[href^="#"] {
font-size: 1.05em;
color: #212121;
}
/* Side Menu*/
/* Home Card */
section.author h3 {
text-transform: uppercase;
font-weight: normal;
color: #222;
}
/* div.home-card {
background: url(/img/final.svg) no-repeat;
flex-grow: 1;
} */
div.background {
background: url(/img/final.svg) no-repeat;
flex-grow: 1;
background-color: crimson;
}
div.home-card {
display: flex;
}
.author {
background-color: blueviolet;
}
.author h3 {
font-size: 1.5em;
}
#media (orientation: portrait) {
body {
background-size: auto 100vh;
}
}
/* Home Card */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofoliu</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/main-mobile.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<main class="page-container">
<!-- Side Menu -->
<nav>
<ul class="main-menu">
<li class="home active"><a class="logo" href="#home"><img src="img/logo.png" alt=""></a></li>
<li class=""><i class="icon-profile-male"></i>Cine sunt</li>
<li><i class="icon-briefcase"></i>Proiecte</li>
<li><i class="icon-adjustments"></i>Servicii</li>
<li><i class="icon-envelope"></i>Contact</li>
</ul>
</nav>
<!-- Side Menu -->
<!-- Content -->
<div class="background"></div>
<div class="home-card">
<section class="author">
<h3>My name</h3>
</section>
</div>
<!-- Content -->
</main>
</body>
</div>
</body>
</html>
If you just put your background and card in a separate div you can get the desired effect.
<!-- Content -->
<div class="content">
<div class="background"></div>
<div class="home-card">
<section class="author">
<h3>My name</h3>
</section>
</div>
</div>
<!-- Content -->
CSS:
.content{
display: flex;
flex-direction: column;
}
Related
Ideally I want to keep the same layout when the browser window shrinks. I don't know if I need media queries to do that. I was trying to use flex-shrink but it wasn't having any effect. I thought flex has a default shrink property? I think part of the problem is I have too many css rules that may be conflicting with one another- I'm trying to get it to look like the wireframe image (below). Here is the codepen.
wireframe-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: 'Cantarell', sans-serif;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src="images\ic-logo.svg" alt="logo" />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul>
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
You will have to set media queries for your elements to adjust their size at a certain browser width. See the sample ones I added below:
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
Of course, feel free to change the sizing as you desire. See it working in the snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: "Cantarell", sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: "Cantarell", sans-serif;
font-size: 20px;
}
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src='https://svgshare.com/i/esC.svg' title='' />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul class="nav-links">
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
After I defined my side menu, I came over this wall that I find hard to break. Thinking back, I should have use css grid instead.
I couldn't find a way to position my main element to the right side of the nav element. I just want to see that H3 in the middle of the remaining body space, to the right. I'm struggling for 2 hours by now so I came to ask for some help.
You have to open fullscreen to really see the page, I haven't created any media queries yet so the style gets stretchy.
Hope you guys have a few minutes to spend with a CSS noob :).
#import url(https://fonts.googleapis.com/css?family=Montserrat:00,500,600,700|Open+Sans:400,400i,600);
#import url(https://cdn.jsdelivr.net/npm/et-line#1.0.1/style.css);
/* Global Tweaks */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: 0
}
body {
font-size: 1.2em;
color: #777;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif
}
.main-menu, h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, sans-serif
}
a {
text-decoration: none;
cursor: pointer;
color: #212121;
display: block;
height: 100%;
}
a:focus, a:hover, a:visited {
text-decoration: none;
outline: 0
}
/* Global Tweaks */
/* Side Menu*/
a:active {
background-color: #333;
}
.logo {
padding-top: 25%;
}
nav {
height: 100vh;
width: 30vh;
box-sizing: border-box;
}
nav ul li {
position: relative;
width: 100%;
}
nav ul li a:before {
position: absolute;
content: '';
background-color: #e2e2e2;
height: 2px;
width: 100%;
left: 0px;
}
nav ul li:first-child a::before {
display: none
}
.main-menu {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-menu li {
height: 100%;
text-align: center;
background-color: #f7f7f7;
}
nav ul li a i {
width: 100%;
padding-top: 15%;
padding-bottom: 5%;
color: #838383;
font-size: 2em;
}
a[href^="#"] {
font-size: 1.05em;
color: #212121;
}
/* Side Menu*/
/* Content Wrapper */
.author h3 {
text-transform: uppercase;
font-weight: normal;
color: #222;
}
/* Content Wrapper */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofoliu</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/main-mobile.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<!-- Side Menu -->
<nav>
<ul class="main-menu">
<li class="home active"><a class="logo" href="#home"><img src="img/logo.png" alt=""></a></li>
<li class=""><i class="icon-profile-male"></i>Cine sunt</li>
<li><i class="icon-briefcase"></i>Proiecte</li>
<li><i class="icon-adjustments"></i>Servicii</li>
<li><i class="icon-envelope"></i>Contact</li>
</ul>
</nav>
<!-- Side Menu -->
<!-- Content -->
<main class="home-card">
<section class="author">
<h3>My Name</h3>
</section>
</main>
<!-- Content -->
</body>
</div>
</body>
</html>
Wrap the nav and main tags to a wrapper like .nav_wrapper then use flex display to the wrapper as follows to show them side-by-side.
.nav_wrapper {
display: flex;
}
More information about the flex style can be found here.
Can't get the hover on menu links to work. I'm using Xampp for local remote testing.
.menu ul>li a:hover{
color: blue;
font-size: 3rem;
}
I've tried different selectors, etc... nothing seems to work
here is the code:
* {
box-sizing: border-box;
}
html,
body {
color: #222;
font-size: 16px;
line-height: 1.4;
height: 100%;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
background-image: url("../images/header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.about {
background-image: url("../images/bellow_header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* here starts the styles for the NAvigation bar */
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important;
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: 'Pacifico', cursive;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu {
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0.5rem 1.5rem;
}
.active a {
color: #CC5200!important;
font-size: 1.7rem;
font-weight: 700;
}
.menu a {
font-size: 1.5rem;
font-weight: 500;
padding: 0.3rem;
text-decoration: none;
color: black;
}
/*by default on mobile the navigation isn't visible*/
.menu li {
display: none;
color: black;
}
.menu .icon {
order: 99;
display: block;
}
.menu.menuOpen {
position: fixed;
width: 80%;
left: 10%;
flex-direction: column;
background-color: #161415;
border-radius: 1rem;
margin: 0.5rem auto;
}
/*moving the icon to the top-right corner*/
.menu.menuOpen .icon {
position: absolute;
right: 0;
top: 0;
}
.menu.menuOpen li {
display: block;
text-align: center;
color: white;
}
/*tablets */
#media only screen and (min-width: 481px) {
/* Styles */
/*hidding the icon*/
.menu .icon {
display: none!important;
}
.menu li {
display: inline-block;
margin-left: 0.5rem;
}
.menu ul>li a:hover {
color: blue;
font-size: 3rem;
}
#logo {
margin-left: 2rem;
margin-top: 1rem;
display: inline-block;
text-align: left;
}
}
/*Landscape making the background look good */
#media screen and (min-width: 481px) and (max-width: 768px) and (orientation:landscape) {
/* Landscape styles */
header {
height: 120%;
}
}
/*laptops */
#media only screen and (min-width: 769px) {
/* Styles */
#logo {
display: inline-block;
position: relative;
top: 3rem;
left: 4rem;
}
}
/*large screens */
#media only screen and (min-width: 1025px) {
/* Styles */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>StyleTravel-Home</title>
<!-- Javascript -->
<script type="text/javascript" src="scripts/app.js"></script>
<meta name="description" content="StyleTravel is one of the most used services for booking HighEnd Sejours">
<meta name="keywords" content="Sejours,StyleTravel,HighEnd,Expensive,Exotic">
<meta name="author" content="Bogdan Mihalca">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- normalize -->
<link rel="stylesheet" href="css/normalize.css">
<!--layout styles -->
<link rel="stylesheet" href="css/layout.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<header>
StyleTravel
<nav class="menu" id="myMenu">
<ul>
<li class="active">Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li><i class="fa fa-search"></i>Search</li>
<li>
<a href="javascript:void(0);" class="icon" onclick="myResponsiveHamburger()">
<i id="hamb-icon" class="fa fa-bars"></i></a>
</li>
</ul>
</nav>
</header>
<div class="about"></div>
</body>
</html>
#logo {
font-size: 2.5rem;
text-decoration: none;
/* display: block !important; */
}
Your hover is absolutely fine but one mistake! display: block !important; this is what you put on and it is stretching and took all the visible width. So when you hovers over the links it's actually not hover over them! If you remove or unset the style it will work!
Though your hover is not looking great but it will hover if you remove the code! Here is my demo
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important; /* Remove this ans code will work!*/
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: "Pacifico", cursive;
outline: 1px solid red; /* for demonestration */
background: #3333; /* for demonestration */
}
Just Remove the commented styles and it will be fine.
I am trying to apply a sticky footer but at the 769px media query it is breaking (won't stay at the bottom of the page). I am using Mobile-First Approach, I am not using Boostrap framework.
Do I need to apply other media queries before the footer will stick? I am trying to add the footer to the bottom of my page.
Am I missing something my CSS media query for 769px or am I missing something in my .main-footer in my CSS Layout Container section under my Base Layout Styles.
I have included my code. Thank you for help!
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 89px)
}
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>
Move min-height of .wrap class out of media query.
You need the minimum width both, when viewing the page on small and large screens.
Like that:
...
.wrap {
min-height: calc(100vh - 89px)
}
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;
}
...
Note that vh works only in very modern browsers (IE >= 11, Firefox >= 50) See this link for compatibility details: http://caniuse.com/#feat=viewport-units.
There are other ways to make an element stick to the bottom, without using calc and vh. This article describes several ways to do that: https://css-tricks.com/couple-takes-sticky-footer/
One of them (called "Negative margin on footer" in the article above) is to add a negative margin to the footer (equal to the height of the footer) and bottom padding to the element that wraps content above the footer (again equal to the height of the footer):
Quote from https://css-tricks.com/couple-takes-sticky-footer/: There is negative top margins on footers
This technique did not require a push element, but instead, required
an extra wrapping element around the content (the wrapping element that held everything except the footer) in which to apply
matching bottom padding to. Again to prevent negative margin from
lifting the footer above any content.
What needs to be changed in your CSS to use this technique:
...
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
...
Here is the whole code (HTML is same as yours):
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>
I'm confused, why it collapses when the window shrinks horizontally? I've tried to set the width of the div and tried setting display:block. I'm using Bootstrap 3, but I don't think it is relevant.
h1 {
font-family: 'LatoBold';
color: #ff990f;
}
/*---------------------------------- Header ----------------------------*/
#header {
position: relative;
margin-bottom: 1em;
min-width: 100ex;
white-space: nowrap;
}
#header > .inner {
height: 95px;
}
/* njnavbar
************************************/
#header .njnavbar {
position: absolute;
bottom: 0px;
right: 0px;
height: 42px;
min-width: 90ex;
white-space: nowrap;
}
#header .njnavbar * {
font-family: 'LatoBlack', Arial, Verdana, sans-serif;
font-size: 16px;
color: #FFF;
text-transform: uppercase;
text-shadow: #08121b 0px 1px 1px;
}
#header .njnavbar ul {
margin-right: 15ex;
}
#header .njnavbar ul li {
float: left;
line-height: 42px;
margin: 0 10px;
list-style: none;
}
#header .njnavbar ul li.last {
margin-right: 0!important;
}
#header .njnavbar > ul > li > a:hover {
color: #e5ca38;
}
/* Phone Number
************************************/
#header .phone {
position: absolute;
top: 1ex;
margin-top: .5ex;
right: 10px;
padding-left: 30px;
height: 26px;
line-height: 26px;
font-size: 18px;
}
#header .phone strong {
font-family: 'LatoBlack';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>example.COM</title>
<!-- Bootstrap -->
<link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/fonts.css" type="text/css" />
<link rel="stylesheet" href="assets/css/login.css" type="text/css" />
</head>
<body>
<div id="header"><div class="inner">
<h1>example.COM</h1>
<div class="phone">
For reservations call <strong>888-555-1212</strong> | <strong>888-555-1213</strong>
</div>
<div class="njnavbar" style="min-width:90ex">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>longer choiceasdf</li>
<li>Customers</li>
<li class="last">Contact</li>
</ul>
</div> <!-- /njnavbar -->
</div></div> <!-- /inner /#header -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Problem seems to be related to the float property.
#header .njnavbar ul li {
float: left; /*remove this*/
display: inline-block; /*add this*/
}
Then the white-space: nowrap; on the parent container will start to work properly.
Also be aware of the ex units, it's rarely used, unless you know what you're doing.