Related
I'm trying to float: right my the email/tel and toggle menu button to the right side of the page but have it in the order: email/tel/toggle menu button (toggle menu button on the furthest right). I want the items to push each other across as the window narrows and then I already have a #media to get rid of the tel and email at a certain width.
The toggle menu button is ahead of my contact details but I figured that if they were all set to float right then then order that you put them in the html should determine how they appear on the page?
Also, as another question, my children menu of drop down menu (under services in my code pen) don't line up with the main header, what css do I need to add/change to fix this?
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggleContainer (
display:inline-block;
float: right;
width: auto;
)
.toggle-menu {
width: 50px;
height: 50px;
top: 10px;
position: absolute;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
HTML
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Great <span class="edit-name" style="font-family:arial black">Things</span>
</a>
</h1>
<div class="teleHeader">
<span class="narrow-hide" ">
<a>
TEL: +44 (0) 111111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#awesome.co.uk
</a>
</span>
</div>
<div class="toggleContainer">
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
#Services
<ul class="services-dropdown">
<li>Hi</li>
<li>There</li>
<li>How</li>
<li>Funny</li>
</ul>
</li>
<li>
More
</li>
<li>
Stuff
</li>
<li>
k
</li>
</ul>
</nav>
</header>
Script
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
CODEPEN: https://codepen.io/Ribeye/pen/qBbJRMa
I would recommend you going for using flexbox, it will be much easier then trying to align inline-block elements.
Here is a good ressource on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As said by #Mark-Att, you can use flexbox to overcome this issue.
I've modified your HTML and added corresponding CSS. Try viewing the result in a full page and you will see the results.
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$header_top.toggleClass('open-menu');
});
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.general-info{
display: flex;
align-content: end;
flex-direction: row;
justify-content: flex-end;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
margin-right: 20px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Awesome <span class="edit-name" style="font-family:arial black">Cakes</span>
</a>
</h1>
<div class="general-info">
<div class="teleHeader">
<span class="narrow-hide">
<a>
TEL: +44 (0) 11111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#yay.com
</a>
</span>
</div>
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
</li>
<li>
abc
</li>
<li>
abc
</li>
</ul>
</nav>
</header>
I am using a a navbar template but I am having an issue where the navbar links still exist on the page and are clickable even when the navbar is "closed".
I was thinking of maybe changing the class with the script, modifying the existing one but I actually am not sure how to do that.
What is the best way to hide the links or get rid of them temporarily when the navbar is closed?
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
a {
text-decoration: none;
color: white;
}
ul,
li {
list-style-type: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
transition: all 1s;
}
.open-menu~nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop dwon menus in the headers*/
ul li ul.services-dropdown {
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown {
display: inline-block;
/* Display the dropdown */
}
ul li ul.services-dropdown li {
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a {
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
#media (max-width: 700px) {
.edit-name {
display: none;
}
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1230px) {
.narrow-hide {
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu~nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<header>
<div class="header-top clearfix">
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown ">
<li>whats </li>
<li>Stuff</li>
<li>Things</li>
</ul>
</li>
<li>
News & Events
</li>
<li>
Contact Us
</li>
<li>
Data Protection
</li>
<li>
Data Protection
</li>
</ul>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "></script>
Codepen: https://codepen.io/Ribeye/pen/BajOoeb
Just add overflow: hidden to nav and it will be fixed;
nav {
overflow: hidden;
}
You've set height: 0 and opacity: 0, but the content still overflows and the only reason it's not visible is bacause of opacity: 0 property, that just makes it transparent so it's still clickable.
You should add pointer-events: none to .nav and pointer-events: auto to .open-menu ~ nav
auto
The element behaves as it would if the pointer-events property
were not specified. In SVG content, this value and the value
visiblePainted have the same effect.
none
The element is never the target of pointer events; however,
pointer events may target its descendant elements if those descendants
have pointer-events set to some other value. In these circumstances,
pointer events will trigger event listeners on this parent element as
appropriate on their way to/from the descendant during the event
capture/bubble phases.
Ref
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
/* added */
nav {
pointer-events: none;
}
.open-menu~nav {
pointer-events: auto;
}
/*****/
a {
text-decoration: none;
color: white;
}
ul,
li {
list-style-type: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
transition: all 1s;
}
.open-menu~nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop dwon menus in the headers*/
ul li ul.services-dropdown {
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown {
display: inline-block;
/* Display the dropdown */
}
ul li ul.services-dropdown li {
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a {
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
#media (max-width: 700px) {
.edit-name {
display: none;
}
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1230px) {
.narrow-hide {
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu~nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown ">
<li>whats </li>
<li>Stuff</li>
<li>Things</li>
</ul>
</li>
<li>
News & Events
</li>
<li>
Contact Us
</li>
<l>
Data Protection
</l>
<l>
Data Protection
</l>
</ul>
</nav>
</header>
You just need to set overflow: hidden property on the nav element
Probably pretty basic question but I'm having issues with it. I'm using bootstrap design for website that I'm making. By default, website didn't have any image sliders.
After adding in img slider, it appears that my navigation bar is always above it and never over the slider, which I don't like. Here's example:
This is how it looks at the moment when you load up the page
And this is how I want it to look when you load the page (note that It works fine when i scroll down a bit)
So basicly my navigation works just fine, It's just not on top of the slider.
I'll include whole .css file that has everything, I linked an image to the slider and created navbar that sits on top (Opacity is 0.7).
I just want to make it sit on top of the slider at start and continue being on top of everything as I scroll (Note scrolling will not work in snippet). It works fine when scrolling just start position is what I'm having problems with.
Also don't worry about the blue stuff over the image in slider. It's WIP.
.slider {
box-shadow: 0px 4px 10px #9d9d9d;
padding: 0;
margin: 0;
max-width: 100%;
max-height: 600px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
}
.slider ul {
width: 1000%;
height: 600px;
position: relative;
list-style: none;
left: 0;
margin: 0;
padding: 0;
line-height: 0;
-moz-animation:slide-animation 5s infinite;
-webkit-animation:slide-animation 25s infinite;
}
.slider li {
width: 10%;
list-style: none;
float: left;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
border-radius: 4px;
}
span.desc1 {
position: absolute;
height: 240px;
width: 600px;
display: block;
font-size: 50px;
bottom: 250px;
left: 800px;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.7);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
span.desc2 {
position: absolute;
height: 80px;
width: 300px;
display: block;
font-size: 0.8em;
bottom: 0;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.6);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
p.desc{
color: #FFF;
}
#-webkit-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
#-moz-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
p {
line-height: 1.55;
color: #333;
font-size: 400;
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 62px;
}
h2 {
font-size: 30px;
margin-bottom: 65px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
/* ==================================================
General
================================================== */
a {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
/* ==================================================
Elements
================================================== */
.btn {
background-color: #2f76ab;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 800;
color: #fff;
padding: 15px 45px;
border-radius: 50px;
}
.btn:hover {
background-color: #E04F00;
color: #fff;
}
.btn:focus {
color: #fff;
}
.btn-ghost {
border: 3px solid #fff;
background-color: transparent;
}
.btn-ghost:hover {
background-color: #fff;
color: #2f76ab;
}
section {
padding: 85px 0;
}
.card {
position: relative;
padding: 0;
border: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
}
a:hover {
text-decoration: none !important;
}
.scrolltop {
display: none;
position: fixed;
bottom: 15px;
right: 15px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #199EB8;
color: #fff;
text-align: center;
font-size: 24px;
}
.scrolltop:hover, .scrolltop:active, .scrolltop:focus {
color: #fff !important;
opacity: .75;
}
/* ==================================================
Hero Styling
================================================== */
.hero {
display: table;
position: relative;
background-image: url(../img/cover.jpg);
background-size: cover;
padding: 150px 0;
color: #fff;
width: 100%;
height: 100vh;
}
.hero:after {
content: '';
z-index: 0;
position: absolute;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.hero .container {
position: relative;
z-index: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.hero-brand {
margin-bottom: 75px;
display: inline-block;
}
.hero-brand:hover {
opacity: .75;
}
.tagline {
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 26px;
margin: 45px 0 75px 0;
color: #fff;
}
/* ==================================================
Header Styling
================================================== */
#header {
background: rgba(47, 118, 171, 0.7);
height: 70px;
}
#header #logo {
margin: 14px 25px 0 0;
}
#header #logo h1 {
font-size: 36px;
margin: 0;
padding: 2px 0;
line-height: 1;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
#header #logo h1 a, #header #logo h1 a:hover {
color: #fff;
}
#header #logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
#media (max-width: 768px) {
#header {
height: 50px;
}
#header #logo {
margin: 10px 0 0 0;
}
#header #logo h1 {
padding: 2px 0;
font-size: 26px;
}
#header #logo img {
max-height: 30px;
}
}
#header .social-nav {
margin-top: 15px;
}
#header .social-nav a {
font-size: 24px;
margin-left: 15px;
color: #fff;
}
#header .social-nav a:hover {
color: rgba(255, 255, 255, 0.75);
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 999;
}
.nav-menu li {
position: relative;
white-space: nowrap;
}
.nav-menu > li {
float: left;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}
.nav-menu ul ul {
top: 0;
left: 100%;
}
.nav-menu ul li {
min-width: 180px;
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Meu Container */
#nav-menu-container {
margin: 0;
}
#media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}
/* Nav Meu Styling */
.nav-menu a {
padding: 22px 15px 18px 15px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 15px;
outline: none;
}
.nav-menu a:hover, .nav-menu li:hover > a, .nav-menu .menu-active > a {
color: rgba(255, 255, 255, 0.75);
}
.nav-menu ul {
margin: 4px 0 0 15px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}
.nav-menu ul li {
background: #fff;
border-top: 1px solid #f4f4f4;
}
.nav-menu ul li:first-child {
border-top: 0;
}
.nav-menu ul li:hover {
background: #199EB8;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.nav-menu ul li a {
color: #333;
-webkit-transition: none;
-o-transition: none;
transition: none;
padding: 10px 15px;
}
.nav-menu ul li a:hover {
color: #fff;
}
.nav-menu ul ul {
margin: 0;
}
/* Mobile Nav Toggle */
#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 8px 10px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
outline: none;
cursor: pointer;
}
#mobile-nav-toggle i {
color: #fff;
}
#media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}
/* ==================================================
About styling
================================================== */
.about h2{
color: #2f76ab;
}
img.tbasr{
width: 50%;
height: 50%;
margin: 10px;
float: right;
}
img.tbasl{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Features Styling
================================================== */
.features {
padding-bottom: 45px;
}
.features h2 {
color: #2f76ab;
}
.features img {
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.9);
left: -260px;
width: 260px;
overflow-y: auto;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#mobile-nav ul li {
position: relative;
}
#mobile-nav ul li a {
color: #fff;
font-size: 16px;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
}
#mobile-nav ul li a:hover {
color: #fff;
}
#mobile-nav ul li li {
padding-left: 30px;
}
#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #199EB8;
}
#mobile-nav ul .menu-item-active {
color: #199EB8;
}
#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(0, 0, 0, 0.6);
display: none;
}
/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}
/* ==================================================
Stats Styling
================================================== */
.stats-row {
margin-top: 65px;
}
.stats-col .circle {
display: inline-block;
width: 160px;
height: 160px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 500;
color: #666;
border: 6px solid #2f76ab;
border-radius: 50%;
padding: 55px 25px 0 25px;
position: relative;
}
.stats-col .circle .stats-no {
color: #fff;
width: 75px;
height: 75px;
line-height: 70px;
top: -25px;
right: -15px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 18px;
background-color: #E04F00;
position: absolute;
border-radius: 50%;
font-weight: 700;
}
/* ==================================================
Call-to-action Styling
================================================== */
.cta {
background-color: #2f76ab;
padding: 25px 0;
}
.cta h2 {
margin-bottom: 5px;
}
.cta h2,
.cta p {
color: #fff;
}
.cta p {
margin-bottom: 0;
opacity: .75;
}
.cta .btn-ghost {
position: relative;
top: 13px;
}
/* ==================================================
Portfolio Styling
================================================== */
.portfolio {
background-color: #edf6ff;
padding-bottom: 0;
}
.portfolio h2 {
color: #2f76ab;
margin-bottom: 25px;
}
.portfolio-grid {
margin-top: 65px;
}
.portfolio-grid .row {
margin: 0;
}
.portfolio-grid .row > div {
padding: 0;
}
.portfolio-grid .row > div .card img {
width: 100%;
}
.portfolio-grid .row > div .card .portfolio-over {
position: absolute;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.portfolio-grid .row > div .card .portfolio-over > div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.portfolio-grid .row > div .card .portfolio-over .card-title {
color: #fff;
font-size: 30px;
}
.portfolio-grid .row > div .card .portfolio-over .card-text {
color: #fff;
opacity: .75;
padding: 0 45px;
}
.portfolio-grid .row > div .card:hover .portfolio-over {
opacity: 1;
visibility: visible;
}
.portfolio img{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Team Styling
================================================== */
.team h2 {
color: #199EB8;
}
.team .col-sm-3 {
padding: 0;
}
.team .card > a {
display: block;
}
.team .card img {
width: 100%;
}
.team .card h4 {
color: #fff;
text-transform: uppercase;
}
.team .card p {
font-size: 11px;
color: #fff;
opacity: .75;
margin: 0;
padding: 0 35px;
}
.team .card .social-nav {
margin-bottom: 45px;
}
.team .card .social-nav a {
color: #fff;
font-size: 16px;
margin: 0 4px;
}
.team .card .social-nav a:hover {
opacity: .75;
}
.team .card:hover .team-over {
opacity: 1;
visibility: visible;
}
.team .card:hover .card-title-wrap {
background-color: #199EB8;
}
.team .card:hover .card-title-wrap .card-title, .team .card:hover .card-title-wrap .card-text {
color: #fff;
}
.team .team-over {
padding-top: 45px;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.team .card-title-wrap {
padding: 15px 25px;
position: relative;
z-index: 9;
background-color: #fff;
}
.team .card-title-wrap .card-title, .team .card-title-wrap .card-text {
font-family: "Raleway", Helvetica, Arial, sans-serif;
display: block;
margin: 0;
}
.team .card-title-wrap .card-title {
font-size: 24px;
color: #333;
}
.team .card-title-wrap .card-text {
font-size: 18px;
color: #999;
}
/* ==================================================
Contact Section
================================================== */
#contact {
background: #f7f7f7;
padding: 80px 0;
}
#contact h2 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
color: #199EB8;
}
#contact .info i {
font-size: 32px;
color: #199EB8;
float: left;
}
#contact .info p {
padding: 0 0 10px 50px;
line-height: 24px;
}
#contact .form #sendmessage {
color: #199EB8;
border: 1px solid #199EB8;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
display: block;
}
#contact .form .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}
#contact .form input, #contact .form textarea {
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#contact .form button[type="submit"] {
background: #199EB8;
border: 0;
padding: 10px 24px;
color: #fff;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#contact .form button[type="submit"]:hover {
background: #23c2e1;
}
/* ==================================================
Footer Styling
================================================== */
.site-footer {
background-color: #111;
padding: 0;
}
.site-footer h2, .site-footer p {
color: #fff;
}
.site-footer p {
opacity: .75;
line-height: 2.0925;
}
.site-footer h2,
.site-footer .btn {
margin-bottom: 25px;
}
.site-footer .social-nav a {
color: #fff;
opacity: .25;
}
.site-footer .social-nav a:hover {
opacity: 1;
}
.site-footer .bottom {
background-color: #000;
padding: 20px 0;
}
.site-footer .bottom .list-inline, .site-footer .bottom p {
margin: 0;
}
.site-footer .bottom .list-inline {
position: relative;
top: 5px;
}
.site-footer .bottom .list-inline a {
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
margin-right: 15px;
}
.site-footer .bottom .list-inline a:hover {
color: #199EB8;
}
.site-footer .credits {
color: #ddd;
}
.site-footer .credits a {
color: #199EB8;
}
/* ==================================================
Responsive Styling
================================================== */
#media (max-width: 61.9em) {
section,
.block,
.cta {
padding: 35px 0;
}
.features {
padding-bottom: 5px;
}
p,
.block p {
margin: 0;
}
.hero-brand {
margin-bottom: 35px;
}
.tagline {
margin: 35px 0;
}
h1 {
font-size: 32px;
margin: 0;
}
h2,
.tagline {
font-size: 24px;
}
h2 {
margin-bottom: 25px;
}
h3 {
font-size: 14px;
}
.hero {
padding: 75px 0;
}
.stats-col {
margin-bottom: 25px;
}
.block {
height: auto;
}
.feature-col {
padding-bottom: 30px;
}
.portfolio-grid .card h3.card-title {
font-size: 18px !important;
}
.portfolio-grid .card .card-text {
font-size: 13px;
}
.team .team-over {
padding-top: 20px;
}
.team .card .social-nav {
margin-bottom: 15px;
padding: 0;
}
.site-footer .social-nav {
margin-bottom: 35px;
}
.site-footer .list-inline {
text-align: center;
padding-bottom: 15px;
}
.site-footer .list-inline li {
display: inline-block;
}
}
#media (max-width: 767px) {
.block {
padding-left: 30px;
padding-right: 30px;
}
}
<!-- Header -->
<header id="header">
<div class="container">
<div id="logo" class="pull-left">
<img src="img/logo-nav.png" alt="" title="" /></img>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><?php echo $lang['nav_tbas']; ?></li>
<li><?php echo $lang['nav_hansaworld']; ?></li>
<li><?php echo $lang['nav_solutions']; ?></li>
<li><?php echo $lang['nav_about']; ?></li>
<!--<li class="menu-has-children">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="menu-has-children">Drop Down 2
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
<li>Drop Down 5</li>
</ul>
</li>-->
<li><?php echo $lang['nav_contact']; ?></li>
<li><?php echo $lang['nav_support']; ?></li>
</ul>
</nav>
<!-- #nav-menu-container -->
<nav class="nav social-nav pull-right hidden-sm-down">
<i class="fa fa-facebook"></i>
<i class="fa fa-envelope"></i>
</nav>
</div>
</header>
<!-- /header -->
<!-- Slider -->
<div class="slider">
<ul>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc1">
<p class="desc1"><div id="slide01">You are awesome<div></p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc2">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
</ul>
</div>
<!-- /Slider -->
Using position: absolute on #header will take it out of the static layout flow and the slider should "slide" up, so to say. You will also need to specify the width since it's out of the flow: width: 100% or width: 100vwshould work. For good measure you should also add top: 0 and left: 0.
You will probably need to set a z-index as well.
Note, I am not very familiar with Bootstrap and there might be a more "Bootstrap-way" to accomplish this, but it should work.
Also note, that I do not know if this will mess with the plugin, you use, that makes the header fixed.
On my site, there is a menu hamburger icon and a title. I've been trying to align them so they on the same row, but I can't figure out how. I've tried wrapping inside a div and I've also tried display:inline-block. Does anybody know how to align the text and hamburger icon.
#import url(http://fonts.googleapis.com/css?family=Raleway:500);
*,
*:before,
*:after {
box-sizing: border-box;
}
.menu-wrapper {
position: relative;
width: 250px;
height: 250px;
margin-top: 60px;
margin-left: 30px;
}
.menu {
position: relative;
width: 36px;
height: 6px;
background-color: #707070;
user-select: none;
transition: all 0.25s ease-in-out;
cursor: pointer;
margin: 5px;
color: #707070;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.menu label {
cursor: pointer;
position: absolute;
font-family: 'Raleway', sans-serif;
font-size: 40px;
line-height: 30px;
top: -12px;
left: 48px;
}
.menu:hover > ul.nav-links,
.menu.open > ul.nav-links {
transition: all 0.25s ease-in-out;
opacity: 1;
width: 180px;
transform: translateX(15px);
pointer-events: auto;
}
.menu:after,
.menu:before {
content: "";
position: absolute;
width: 36px;
height: 6px;
background-color: #707070;
transition: all 0.25s ease-in-out;
}
.menu:after {
top: 12px;
}
.menu:before {
top: -12px;
}
.menu:hover,
.menu.open {
background-color: transparent;
}
.menu:hover::after,
.menu:hover::before,
.menu.open::after,
.menu.open::before {
transition: all 0.3s ease-in-out;
width: 18px;
}
.menu:hover::after,
.menu.open::after {
transform: translate(3px, -7px) rotate(405deg);
}
.menu:hover::before,
.menu.open::before {
transform: translate(12px, 17px) rotate(-405deg);
}
.menu ul.nav-links {
margin: 0;
padding: 36px 0 0 0;
opacity: 0;
transform: translateX(-15px);
transition: all 0.25s ease-in-out;
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.menu ul.nav-links li {
width: 100%;
padding: 4px 8px;
list-style-type: none;
font-family: 'Raleway', sans-serif;
font-size: 25px;
text-transform: uppercase;
transition: all 0.25s ease-in-out;
border-left: 2px solid #707070;
}
.menu ul.nav-links li:hover,
.menu ul.nav-links li.active {
color: #707070;
border-left: 2px solid #707070;
}
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Oswald');
#import url('https://fonts.googleapis.com/css?family=Quicksand');
header {
background: #fff;
height: 145px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
border-bottom: 5px solid;
border-bottom-color: #bcbcbc;
}
.nav-up {
top: -145px;
}
body,
html {
margin: 0;
padding: 0;
}
video.home {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.vid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
footer {
background: #222020;
height: 50px;
position: fixed;
bottom: 0;
margin-bottom: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
width: 99%;
}
p.copyright {
color: white;
text-transform: uppercase;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
div.footer {
float: left;
margin-left: 2em;
}
h1 {
text-align: center;
font-family: 'Fjalla One', sans-serif;
color: #666;
}
p {
color: black;
font-family: 'Oswald', sans-serif;
}
a.contact {
text-decoration: none;
color: white;
background-color: #36a2dc;
padding: 20px;
padding-left: 10px;
border-radius: 5%;
cursor: pointer;
outline: none;
height: 100px;
width: 200px;
font-family: 'Quicksand', sans-serif;
}
i.icon {
padding: 8px;
}
div.contact {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
ul.social {
display: block;
margin: 5% 0;
list-style-type: none;
text-align: center;
margin-top: 0px;
}
ul.social li {
font-size: 1em;
display: inline;
padding: 0 2%;
}
ul.social li a {
color: #707070;
}
ul.social li.dribble a:hover {
color: #e040a9;
}
ul.social li.twitter a:hover {
color: #258fc9;
}
ul.social li.behance a:hover {
color: #212121;
}
ul.social li.googleplus a:hover {
color: #e73710;
}
ul.social li.github a:hover {
color: #171515;
}
/*=================HEADER=====================================*/
a {
text-decoration: none;
color: #707070;
}
a:hover {
color: #898e8e;
}
a:active {
color: white;
}
div.head {
margin-top: 10px;
}
/*=========================================================== */
.container {
max-width: 960px;
margin: 0 auto;
}
/* ============================================================
SECTIONS
============================================================ */
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
margin-bottom: 40px;
font-family: 'Fjalla One', sans-serif;
font-size: 30px;
color: #515151;
text-align: center;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
color: #515151;
text-align: center;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
}
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg");
}
section.module.parallax-2 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg");
}
section.module.parallax-3 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg");
}
#media all and (min-width: 600px) {
section.module h2 {
font-size: 42px;
}
section.module p {
font-size: 20px;
}
section.module.parallax h1 {
font-size: 96px;
}
}
#media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
}
<header class="nav-down">
<!-- Open on hover menú -->
<div class="menu-wrapper">
<div class="menu">
<ul class="nav-links">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li class="active">Projects
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="">
<h1>William Chen</h1>
<ul class="social">
<li class="dribble"><i class="fa fa-dribbble fa-3x"></i>
</li>
<li class="twitter"><i class="fa fa-twitter fa-3x"></i>
</li>
<li class="behance"><i class="fa fa-behance fa-3x"></i>
</li>
<li class="googleplus"><i class="fa fa-google-plus fa-3x"></i>
</li>
<li class="github"><i class="fa fa-github fa-3x"></i>
</li>
</ul>
</div>
</header>
Here is a JsFiddle with some changes: https://jsfiddle.net/m5b2f0gc/1/
One thing I did is changed the .menu margin, and then I created a new ID called "william" to help move the margin left.
.menu {
position: relative;
width: 36px;
height: 6px;
background-color: #707070;
user-select: none;
transition: all 0.25s ease-in-out;
cursor: pointer;
margin: 20px;
color: #707070;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
#william {
margin-left: 150px;
}
Lots of comments here...but none of them are suggesting the seemingly easiest option.
Wrap both of the elements in question in a div (or not, it works without parent div so long as your widths for both menu-wrapper and head are <= 100% combined).
Add the following both the .menu-wrapper and the .head class:
.menu-wrapper, .head {
float:left;
}
That will get them on the same row. Then you can use padding/line heights to get them aligned more beautifully.
I think this code does what you want:
#import url(http://fonts.googleapis.com/css?family=Raleway:500);
*,
*:before,
*:after {
box-sizing: border-box;
}
.menu-wrapper {
position: relative;
width: 250px;
height: 250px;
margin-top: 60px;
margin-left: 30px;
text-align: justify;
}
.menu {
position: relative;
width: 36px;
height: 6px;
background-color: #707070;
user-select: none;
transition: all 0.25s ease-in-out;
cursor: pointer;
margin: 5px;
color: #707070;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.menu label {
cursor: pointer;
position: absolute;
font-family: 'Raleway', sans-serif;
font-size: 40px;
line-height: 30px;
top: -12px;
left: 48px;
}
.menu:hover > ul.nav-links,
.menu.open > ul.nav-links {
transition: all 0.25s ease-in-out;
opacity: 1;
width: 180px;
transform: translateX(15px);
pointer-events: auto;
}
.menu:after,
.menu:before {
content: "";
position: absolute;
width: 36px;
height: 6px;
background-color: #707070;
transition: all 0.25s ease-in-out;
}
.menu:after {
top: 12px;
}
.menu:before {
top: -12px;
}
.menu:hover,
.menu.open {
background-color: transparent;
}
.menu:hover::after,
.menu:hover::before,
.menu.open::after,
.menu.open::before {
transition: all 0.3s ease-in-out;
width: 18px;
}
.menu:hover::after,
.menu.open::after {
transform: translate(3px, -7px) rotate(405deg);
}
.menu:hover::before,
.menu.open::before {
transform: translate(12px, 17px) rotate(-405deg);
}
.menu ul.nav-links {
margin: 0;
padding: 36px 0 0 0;
opacity: 0;
transform: translateX(-15px);
transition: all 0.25s ease-in-out;
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.menu ul.nav-links li {
width: 100%;
padding: 4px 8px;
list-style-type: none;
font-family: 'Raleway', sans-serif;
font-size: 25px;
text-transform: uppercase;
transition: all 0.25s ease-in-out;
border-left: 2px solid #707070;
}
.menu ul.nav-links li:hover,
.menu ul.nav-links li.active {
color: #707070;
border-left: 2px solid #707070;
}
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Oswald');
#import url('https://fonts.googleapis.com/css?family=Quicksand');
header {
background: #fff;
height: 145px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
border-bottom: 5px solid;
border-bottom-color: #bcbcbc;
}
.nav-up {
top: -145px;
}
body,
html {
margin: 0;
padding: 0;
}
video.home {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.vid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
footer {
background: #222020;
height: 50px;
position: fixed;
bottom: 0;
margin-bottom: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
width: 99%;
}
p.copyright {
color: white;
text-transform: uppercase;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
div.footer {
float: left;
margin-left: 2em;
}
h1 {
text-align: center;
font-family: 'Fjalla One', sans-serif;
color: #666;
margin-bottom: -80px;
}
p {
color: black;
font-family: 'Oswald', sans-serif;
}
a.contact {
text-decoration: none;
color: white;
background-color: #36a2dc;
padding: 20px;
padding-left: 10px;
border-radius: 5%;
cursor: pointer;
outline: none;
height: 100px;
width: 200px;
font-family: 'Quicksand', sans-serif;
}
i.icon {
padding: 8px;
}
div.contact {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
ul.social {
display: block;
margin: 5% 0;
list-style-type: none;
text-align: center;
margin-top: 0px;
}
ul.social li {
font-size: 1em;
display: inline;
padding: 0 2%;
}
ul.social li a {
color: #707070;
}
ul.social li.dribble a:hover {
color: #e040a9;
}
ul.social li.twitter a:hover {
color: #258fc9;
}
ul.social li.behance a:hover {
color: #212121;
}
ul.social li.googleplus a:hover {
color: #e73710;
}
ul.social li.github a:hover {
color: #171515;
}
/*=================HEADER=====================================*/
a {
text-decoration: none;
color: #707070;
}
a:hover {
color: #898e8e;
}
a:active {
color: white;
}
div.head {
margin-top: 10px;
}
/*=========================================================== */
.container {
max-width: 960px;
margin: 0 auto;
}
/* ============================================================
SECTIONS
============================================================ */
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
margin-bottom: 40px;
font-family: 'Fjalla One', sans-serif;
font-size: 30px;
color: #515151;
text-align: center;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
color: #515151;
text-align: center;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
}
section.module.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg");
}
section.module.parallax-2 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg");
}
section.module.parallax-3 {
background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg");
}
#media all and (min-width: 600px) {
section.module h2 {
font-size: 42px;
}
section.module p {
font-size: 20px;
}
section.module.parallax h1 {
font-size: 96px;
}
}
#media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
}
<h1>William Chen</h1>
<div class="menu-wrapper">
<div class="menu">
<ul class="nav-links">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li class="active">Projects
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="head">
<ul class="social">
<li class="dribble"><i class="fa fa-dribbble fa-3x"></i>
</li>
<li class="twitter"><i class="fa fa-twitter fa-3x"></i>
</li>
<li class="behance"><i class="fa fa-behance fa-3x"></i>
</li>
<li class="googleplus"><i class="fa fa-google-plus fa-3x"></i>
</li>
<li class="github"><i class="fa fa-github fa-3x"></i>
</li>
</ul>
</div>
JSFiddle: https://jsfiddle.net/wvyxe5rp/2/
What I did is move the h1 element on top and then add this line:
margin-bottom: -80px;
inside the css of h1.
I've been putting a website portfolio together for myself and I just got my home page done. I will say this because it pertains to my problem, I put a div after the header which includes my vertical navigation on the right side, a paragraph that I wanted next to the nav and a background image(id=background).I did this because I only wanted the image to cover the space between the header and the bottom of the page. I noticed every time the paragraph(p) went next to the nav, it would push the nav down. I got a tip from a different post to make the position absolute, which worked. I am now trying to make my home page a responsive web page for tablet and mobile and ran into a problem. I changed the nav to horizontal navigation below the header when changing the position of p to absolute, it stretches the nav space.(as you can see if you resize the page). Is there a way I can move the paragraph out of the div but still keep it in the same place on the regular page?
Here is my code:-
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
#import url('https://fonts.googleapis.com/css?family=Titillium+Web');
#import url('https://fonts.googleapis.com/css?family=Fira+Sans');
#import url('https://fonts.googleapis.com/css?family=Lobster');
#import url('https://fonts.googleapis.com/css?family=Overlock');
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
padding: 0;
}
#background {
display: block;
background-image: url(images/Untitled-1.jpg);
background-repeat: no-repeat;
background-size: contain;
overflow: auto;
height: 100%;
width: 100%;
}
header {
background: rgb(115, 78, 116);
width: auto;
padding: 1%;
}
p {
width: 20%;
font-size: 20px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
position: absolute;
margin-left: 50%;
font-family: 'Overlock', sans-serif;
font-style: normal;
margin-top: 15%;
}
.icon {
list-style-type: none;
display: inline;
}
.list {
display: inline-block;
font-family: 'Fira Sans', sans-serif;
margin-right: 1%;
}
i {
display: inline;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
footer {
color: antiquewhite;
margin: 0;
padding: 0;
}
.h1 {
font-family: 'Fjalla One', sans-serif;
color: floralwhite;
font-size: 300%;
display: inline;
padding-right: 300px;
font-weight: bolder;
}
.name {
font-family: 'Lobster', sans-serif;
color: floralwhite;
display: inline;
font-weight: normal;
}
nav {
float: right;
}
.stretch {
list-style-type: none;
padding: 20px;
margin: 20px 0px;
border-radius: 50px 0px 0px 50px;
width: 250px;
height: 50px;
text-align: center;
text-shadow: 2px 2px black;
font-size: 150%;
font-family: 'Fjalla One', sans-serif;
background-color: rgb(40, 31, 17);
position: relative;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.stretch:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px 0px 0px 50px;
background: rgb(91, 56, 29);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: antiquewhite;
}
.stretch:hover:before,
.stretch:focus:before,
.stretch:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/* ----------- phone ----------- */
/* Portrait and Landscape */
#media screen and (min-width: 320px) and (max-width: 640px) {}
/* ----------- tablet ----------- */
#media only screen and (min-width: 768px) and (max-width: 1024px) {
/*changing nav to horizontal postion*/
nav,
nav ul,
nav li,
nav a {
display: inline;
float: none;
width: 100%;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.stretch {
display: inline-block;
list-style-type: none;
padding: 10px;
margin: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
width: auto;
height: auto;
text-align: center;
text-shadow: 2px 2px black;
font-size: 100%;
font-family: 'Fjalla One', sans-serif;
background-color: rgb(40, 31, 17);
position: static;
/* removing nav animation*/
-webkit-transform: none;
transform: none;
-webkit-transform-origin: none;
transform-origin: none;
-webkit-transition-property: none;
transition-property: none;
-webkit-transition-duration: none;
transition-duration: none;
-webkit-transition-timing-function: none;
transition-timing-function: none;
}
.stretch:hover:before,
.stretch:focus:before,
.stretch:active:before {
-webkit-transform: none;
transform: none;
-webkit-transition-timing-function: none;
transition-timing-function: none;
}
#background {
background-color: rgb(40, 31, 17);
width: 100%;
background-image: none;
}
/*trying to get the background to display correctly*/
body {
background-image: url(images/Profile_2.jpg);
background-size: auto;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
/*moving the paragraph to the left since image will not display*/
p {
width: 20%;
font-size: 40px;
color: antiquewhite;
padding: 0;
margin-top: 10%;
margin-right: 40%;
font-family: 'Overlock', sans-serif;
font-style: normal;
position: static;
}
}
<div id="wrapper">
<header>
<ul class="icon">
<li class="h1">Tavyon <span class="name">Richardson</span>
</li>
<li class="list">TavyonRichardson#yahoo.com<i class="material-icons">mail_outline</i>
</li>
<li class="list">989-285-5133<i class="material-icons">call</i>
</li>
<li class="list">Alma, Michigan<i class="material-icons">location_on</i>
</li>
</ul>
</header>
<div id="background">
<p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
<nav id="navbar">
<ul class="nav">
<li class="stretch">About me
</li>
<li class="stretch">Courses
</li>
<li class="stretch">Projects
</li>
<li class="stretch">Blog
</li>
<li class="stretch">Resume
</li>
</ul>
</nav>
</div>
</div>