I've made my nav and it works fine on desktop fully responsive, but when ever I try to emulate for mobile instead of pushing over the div elements it instead simply shrinks everything. you can see this in action
HTML (inserted via an include statement)
<header id="headers" class="nav-main "> <!-- animated fadeInDown-->
<div class="logo">
<img src="img/logo.png" alt="modren-day-thrones-logo"/>
</div>
<ul>
<li>
Home
</li>
<li>
Chairs
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>
Executive
</li>
<li>
Office
</li>
<li>
Lounge
</li>
</ul>
</div>
</div>
</li>
<li>
About Us
</li>
<?php
if(isset($_SESSION['logged_in'])){ ?>
<li>
Add
</li>
<li>
Log Out
</li>
<?php
}else{ ?>
<li>
Login
</li>
<?php
}
?>
</ul>
</header>
<div class="main-header-mobile-box">
<header class="mobile pushmenu-push">
<nav>
<div class="innerbutton">
<div class="catagoerys">
<!--<div id="cpBtn" class="nav-toggel">-->
<div class="menuebutton group">
<i class="fa fa-bars" id="nav_list"></i>
</div>
</header>
</div>
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
<h3>Menu</h3>
<i class="fa fa-home"></i> Home
<i class="fa fa-folder-open"></i>Chairs
<i class="fa fa-folder"></i> Executive
<i class="fa fa-folder"></i> Office
<i class="fa fa-folder"></i> Lounge
<i class="fa fa-fw fa-list"></i> About Us
<i class="fa fa-sign-in"></i> Login
<?php
if(isset($_SESSION['logged_in'])){ ?>
<i class="fa fa-sign-out"></i> Log Out
<i class="fa fa-plus"></i>Add
<?php
}
?>
<hr>
</nav>
<div class="container">
<div class="main">
<section class="buttonset">
<div id="nav_list">Menu</div>
</section>
end html
body{
text-align:center;
font:1em "Open Sans", sans-serif;
width:70%;
min-width: 349px;
max-width: 1490px;
margin:0 auto;
overflow-x: hidden;
display: block;
}
.pushmenu { /*this is the nav*/
background: #3c3933;
font-family: Arial, Helvetics, sans-serif;
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
position:fixed;
}
.right-login-mobile-nav{
float: right;
display: inline-block;
}
.break-bar{
width:100%;
display: block;
}
.pushmenu h3 {
color: #cbbfad;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
margin: 0;
background: #282522;
height: 16px;
}
.buttonset{
display: none;
}
.pushmenu a {
display: block; /* drops the nav vertically*/
color: #fff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #56544e;
border-bottom: 1px solid #312e2a;
padding: 14px;
}
.pushmenu a:hover {
background:#333;
}
.pushmenu a:active {
background: #454f5c;
color: #fff;
}
.pushmenu-left {
left: -240px;
}
.pushmenu-left.pushmenu-open {
left: 0;
}
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#nav_list {
background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
cursor: pointer;
height: 27px;
width: 33px;
text-indent: -99999em;
}
nav-list.active {
background-position: -33px top;
}
.buttonset {
background: #fff;
height: 16px;
padding: 10px 20px 20px;
}
Mobile specific effects
.mobilebtnmenue{
text-align: left;
margin-top: -22px;
margin-left: 35px;
}
.mobile{
position: relative;
z-index: 50;
background: #222;
font-family: 'Varela Round', sans-serif;
font-size: 17px;
display: block;
}
.pushmenu {
display: block;
}
header{
display:block;
height:100px;
}
body{
width:100%;
min-width: 375px;
}
apparently this code in the header fixes it?
however there seems to be a few hiccups here and there.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Related
I'm trying to get the dropdown menu for the user icon more towards the left instead of how it looks in the screen shot below where it's off to the right. Also when the page initially loads the dropdown menu shows without a user clicking on it. How do I get that to hide until I hover or click on the user icon. Is this a css element that fixes either of these issues?
Screenshot
Codepen
#charset "UTF-8";
#import url("https://fonts.googleapis.com/css?family=Varela+Round");
nav.navbar.navbar-expand-lg {
background-color: var(--linq-color-gray-300);
box-shadow: 0px 0px 4px #000033;
/*padding: 0;*/ }
html, body {
overflow-x: hidden;
height: 100%; }
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif; }
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: 0px 0px 4px #000033;
background-color: var(--linq-color-gray-300);
position: fixed;
height: 70px !important;
overflow: hidden;
z-index: 10; }
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px; }
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center; }
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px; }
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: var(--linq-color-gray-300);
overflow-y: scroll; }
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sidebarMenuInner li {
list-style: none;
color: var(--linq-color-gray-700);
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: var(--linq-color-gray-700); }
.sidebarMenuInner li a {
color: var(--linq-color-gray-700);
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
text-align: left; }
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0); }
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none; }
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px; }
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: var(--linq-color-gray-700); }
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px; }
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left; }
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px; }
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0; }
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px; }
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px; }
/* extra css */
.navbar-toggler {
padding: .25rem, .01rem !important;
display: block !important;
background: red;
margin-right: 5px; }
.navbar-toggler[aria-expanded="true"] {
/*position: fixed;*/
/*top: 20px;
left: 20px;*/
z-index: 1032;
padding: .25rem, .01rem !important; }
#sidebar-wrapper {
position: fixed;
top: 0px;
bottom: 0px;
left: 0;
z-index: 731 !important;
width: 370px !important;
padding-top: 60px;
background-color: var(--linq-color-gray-300) !important; }
#sidebar-wrapper li a:hover {
background-color: var(--linq-color-gray-100) !important; }
.navbar-toggler-icon {
width: 35px;
height: 5px;
background-color: var(--linq-color-gray-700);
margin: 6px 0; }
.material-icons-chevron-right {
font-family: 'Material Icons';
font-weight: normal !important;
font-style: normal !important;
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
display: inline-block !important;
white-space: nowrap !important;
word-wrap: normal !important;
direction: ltr !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
float: right !important;
padding-right: 8px !important;
padding-top: 8px; }
.material-icons-person {
font-family: 'Material Icons';
font-weight: normal !important;
font-style: normal !important;
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
display: inline-block !important;
white-space: nowrap !important;
word-wrap: normal !important;
direction: ltr !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
padding-right: 8px !important;
padding-top: 8px; }
.collapse {
padding-left: 25px; }
.py-2 {
background-color: var(--linq-color-gray-300); }
.text-center {
color: var(--linq-color-gray-700) !important; }
.divFormFieldInput {
padding: 0 .75em 0 .75em;
font-size: 0.75em;
position: relative;
display: inline-block;
text-align: left;
border-color: var(--linq-color-gray-500);
line-height: 1.125;
float: left;
height: 35px; }
.dropdown-sfa {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.dropdown-year {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.btn-sfa {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.btn-year {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2); }
.dropdown-toggle {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
margin-left: var(--linq-spacing-2);
font: var(--linq-font-size-5) var(--linq-font-secondary);
font-size: var(--linq-font-size-5);
padding: var(--linq-spacing-2);
border: none; }
.dropdown-menu {
color: var(--linq-color-gray-700) !important;
overflow-y: scroll !important; }
.dropdown-item {
font-size: .75rem !important;
color: var(--linq-color-gray-700) !important; }
.dropdown-item[disabled] {
color: rgba(0, 0, 0, 0.38); }
.person-email[disabled] {
color: rgba(0, 0, 0, 0.38);
margin: 0 var(--linq-spacing-4) var(--linq-spacing-2); }
.dropdown-item:hover {
color: var(--linq-color-gray-300) !important; }
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot);
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url(https://example.com/MaterialIcons-Regular.woff2) format("woff2"), url(https://example.com/MaterialIcons-Regular.woff) format("woff"), url(https://example.com/MaterialIcons-Regular.ttf) format("truetype"); }
.material-icons {
font-family: 'Material Icons';
font-weight: normal !important;
font-style: normal !important;
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
display: inline-block !important;
white-space: nowrap !important;
word-wrap: normal !important;
direction: ltr !important;
-webkit-font-feature-settings: 'liga' !important;
-webkit-font-smoothing: antialiased !important;
float: right !important;
padding-right: 8px !important; }
.nav-container {
background-color: var(--linq-color-gray-300);
color: var(--linq-color-gray-700);
border-radius: 4px;
padding: 1em;
border: 1px solid #eee;
display: block;
max-width: 400px;
margin: 0 auto;
text-align: center;
font: var(--linq-font-size-5) var(--linq-font-secondary); }
ul,
li {
list-style: none;
-webkit-padding-start: 0; }
a {
text-decoration: none;
color: var(--linq-color-gray-300); }
.nav-item {
padding: 1em;
display: inline; }
.nav-item-dropdown {
position: relative;
color: var(--linq-color-gray-700) !important; }
.nav-item-dropdown:hover > .dropdown-menu {
display: block;
opacity: 1; }
.dropdown-trigger {
position: relative;
color: var(--linq-color-gray-700) !important; }
.dropdown-trigger:focus {
display: block;
opacity: 1; }
.dropdown-trigger::after {
content: "›";
position: absolute;
color: var(--linq-color-gray-700);
font-size: 24px;
font-weight: bold;
transform: rotate(90deg);
top: -5px;
right: -15px; }
.dropdown-menu {
background-color: var(--linq-color-gray-300);
display: inline-block;
text-align: right;
position: absolute;
top: 2.5rem;
right: -10px;
display: none;
opacity: 1;
transition: opacity 0.5s ease;
width: 160px; }
.dropdown-menu a {
color: #fff; }
a:link, a:visited {
color: var(--linq-color-gray-700) !important; }
.dropdown-menu-item {
cursor: pointer;
padding: 1em;
text-align: center;
font: normal normal normal 14px/20px var(--linq-font-primary); }
.dropdown-menu-item:hover {
background-color: var(--linq-color-gray-300); }
.dropdown-menu-item li .nav-item-select a {
color: var(--linq-color-gray-700) !important; }
.dropdown-menu {
position: absolute !important;
top: 100% !important;
right: auto !important;
z-index: 1000 !important;
/*display: none !important;*/
float: left !important;
min-width: 10rem !important;
padding: .5rem 0 !important;
margin: var(--linq-spacing-6) !important;
margin-left: var(--linq-spacing-2);
font-size: 1rem !important;
color: #212529 !important;
text-align: left !important;
list-style: none !important;
background-color: var(--linq-color-gray-100) !important;
color: var(--linq-color-gray-700);
background-clip: padding-box !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: .25rem !important; }
.dropdown-menu-person {
position: absolute !important;
top: 100% !important;
left: auto !important;
z-index: 1000 !important;
/*display: none !important;*/
float: left !important;
min-width: 10rem !important;
padding: .5rem 0 !important;
margin: var(--linq-spacing-6) !important;
margin-left: var(--linq-spacing-2);
font-size: 1rem !important;
color: #212529 !important;
text-align: left !important;
list-style: none !important;
background-color: var(--linq-color-gray-100) !important;
color: var(--linq-color-gray-700);
background-clip: padding-box !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: .25rem !important; }
.button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
-webkit-appearance: button;
cursor: pointer;
text-transform: none;
margin: 0;
font: inherit;
color: inherit; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />
<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material-theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq-snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+" crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">
<link rel="stylesheet" href="../css/core2.css">
</head>
<body class="loggedin">
<div class="site-wrapper">
<!-- HEADER -->
<header id="header">
<nav class="navbar navbar-expand-lg mb-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
<span class="material-icons">menu
</span>
</button>
<a href='/' class="navbar-brand">
<img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
</a>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select SFA</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select Program Year</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="Div1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-search"></i>
</li>
</ul>
</div>
<div class="dropdown show">
<a class="nav-link" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="material-icons-person">
person
</span>
</a>
<div class="dropdown-menu-person" aria-labelledby="dropdownMenuLink">
<h4 class="header-person">Profile</h4>
<div class="person-email" disabled="true">user#user.com</div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</nav>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" class="sb-wrapper collapse">
<!-- <a href="#menu-toggle" class="sidebtn-holder" id="menu-toggle">
<i class="fas fa-chevron-circle-left"></i>
</a>-->
<div class="list-wrapper">
<div class="nav-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#" v-b-tooltip.hover.right title="Entity Manager">
<div> Entity Manager</div>
</a>
</li>
<li>
<a href="/#/AZSiteApps" v-b-tooltip.hover.right title="Area Eligibility">
<div> Area Eligibility
</div>
</a>
</li>
<li>
<a href="/#/AZFFVP" v-b-tooltip.hover.right title="Site Applications">
<div> Site Applications</div>
</a>
</li>
<li>
<a href="/#/AZFDCH" v-b-tooltip.hover.right title="Documents">
<div> Documents</div>
</a>
</li>
<li>
<a href="#" v-b-tooltip.hover.right title="Contacts Directory">
<div> Contacts Directory</div>
</a>
</li>
<li>
<a href="/#/AZProviderList" v-b-tooltip.hover.right title="Provider & Vendor List">
<div> Providers & Vendors</div>
</a>
</li>
<li>
<a href="#" v-b-tooltip.hover.right title="Contracts">
<div> Contracts</div>
</a>
</li>
<li>
<a href="#" v-b-tooltip.hover.right title="Management Plan">
<div> Management Plan</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div>Provider Operation</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Provider List">
<div> Provider List</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Provisions">
<div> Provisions</div><span class="material-icons">chevron_right</span>
</a>
<ul>
<li>Stream 1</li>
<li>Stream 2</li>
</ul>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> FFVP</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> NDL Dashboard</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Budget">
<div> Budget</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="midcol-nslp" class="p-3">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</main>
<footer class="mt-auto fixed-bottom">
<div class="container-fluid py-2">
<div class="row">
<div class="col text-center small">
© 2020 Colyar Technology Solutions, LLC. All rights reserved.
</div>
<div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
<ul class="nav">
<li class="nav-item">
<i class="fas fa-envelope-open-text" data-toggle="tooltip" data-placement="top" title="Contact Support"></i>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="../JS/app.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
document.getElementById("datetime").innerHTML = formatAMPM();
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+ampm;
}
</script>
</body>
</html>
Change in style left:auto !important to right:0; and add display:none.
.dropdown-menu-person {
.........
right:0;
display:none;
}
create new class .show and add style
.show {
display:block;
}
Add event click to icon to toggle the class .show.
document.querySelector(".dropdown.show > a").addEventListener("click", (e) => {
document.querySelector(".dropdown-menu-person").classList.toggle("show")
})
so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
I'm trying to make some buttons with text positioned below a font awesome icon where both are positioned centrally inside a list item, and I need the anchor element, which also contains the span element for the font awesome icon, to fill the entire size of the list item.
I can fill the list item with the anchor no problem, but I'm having trouble positioning the icon's span above the text in the anchor that contains it.
JSFiddle: https://jsfiddle.net/qod142fz/.
HTML:
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</li>
</ul>
</div>
CSS:
/* SIDEBAR PRIMARY */
#sidebarPrimary
{
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton
{
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover
{
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a > span
{
display: block;
text-align: center;
margin-bottom: 5px;
}
Problem is coming from flex. I recommend wrapping another div around the elements that should be centered inside the a tags
/* SIDEBAR PRIMARY */
#sidebarPrimary {
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton {
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover {
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a .fa {
display: block;
height: 1em;
margin: 0 auto 5px;
text-align: center;
width: 1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-home"></span>Home
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-user"></span>Personal Details
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-briefcase"></span>Company
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-gbp"></span>Invoices
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-address-book"></span>Contacts
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-minus"></span>Expenses
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-list"></span>Payslips
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-cog"></span>Settings
</div>
</a></li>
</ul>
</div>
#sidebarPrimary {
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary>ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary>ul>li.navButton {
width: 100%;
height: 15vw;
}
#sidebarPrimary>ul>li.navButton>a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary>ul>li.navButton>a:hover {
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary>ul>li.navButton>a>span {
display: block;
text-align: center;
margin-bottom: 5px;
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 10px;
}
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</li>
</ul>
</div>
Just add position: absolute; top: 40px; to font-awesome icons
When the user clicks on the arrow down button it should being the user down to section 2. However,the section 2 page doesn't exactly fit it also shows some of section 3.
When a user clicks on the arrows how can I get it to bring the user to each section which is in size proportion and doesn't also show another section?
If I include min-height:100vh; this does the job. However, if I add text to the top of section 2 it can't be seen. This is due to the height being greater. Therefore, how can I put text at the top at it fits correctly at the top so I don't have to click on the arrow from section 1 to go section 2 then have to scroll up a little to see the text at the top of section 2.
HTML/CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
display: inline-block;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
display: inline-block;
padding: 0px;
width: 250px;
}
section{min-height:100vh;padding:10vh 0 0;}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<h2>
This is some text
</h2>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
This can be easily achieved using Fullpage.js. Remember to include all the resources and of course don't forget to call jquery script. To make it clear, please see my example.
$(document).ready(function() {
$('#fullpage').fullpage();
});
.one {
background: #F1E05A;
}
.two {
background: #563D7C;
}
.three {
background: #E34C26;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<div id="fullpage">
<div class="section one">Some section</div>
<div class="section two">Some section</div>
<div class="section three">Some section</div>
</div>
How can I centre the two <div>s within the <hero> div?
Here is my codepen.
Just to make things more clear, I want to the photo of me and the grey rectangle shape in the centre over the background image.
HTML
<div class="hero">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
CSS
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
.shape {
content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:grey;
color:white;
padding:3px;
margin:200px auto 0 auto;
width:200px;
height:200px;
position: absolute;
}
.shape2 {
background: linear-gradient(15deg, #4D5061, #4D5061);
border-radius: 85px;
color:white;
opacity: 0.9;
padding:0px;
margin:410px auto 0 auto;
width:250px;
height:40px;
left:200;
position: absolute;
}
HTML
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align:center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin:0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
text-align: center;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding:0;
right:0;
bottom:0;
left:0;
}
.footertext{
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.shape {
content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:grey;
color:white;
padding:3px;
margin:200px auto 0 auto;
width:200px;
height:200px;
position: absolute;
}
.shape2 {
background: linear-gradient(15deg, #4D5061, #4D5061);
border-radius: 85px;
color:white;
opacity: 0.9;
padding:0px;
margin:410px auto 0 auto;
width:250px;
height:40px;
left:200;
position: absolute;
}
</style>
I would wrap .shape, .shape2 in a new element, absolutely position that new element to center it horizontally/vertically, then center the 2 shape elements within that element.
.shapes {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.shape, .shape2 {
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position: relative;
text-align: center;
width: 100%;
width: 100vw;
height: 100%;
height: 70vh;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.shape {
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background: grey;
color: white;
padding: 3px;
width: 200px;
margin-bottom: 1em;
}
.shape2 {
background: linear-gradient(15deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
opacity: 0.9;
padding: 0px;
width: 250px;
}
.shapes {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.shape,
.shape2 {
margin-left: auto;
margin-right: auto;
}
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="shapes">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="section2" class="section2">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section3">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
With .hero, add text-align: center; as a property.
Like so:
.hero{
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position:relative;
width: 100vw;
height: 70vh;
text-align: center;
}
And remove position: absolute from each element :)
Change the margin of the .shape into
margin:200px auto 0 550px;
then change the margin of the .shape2 into
margin:410px auto 0 525px;
It will solve the problem however it`s not that responsive
You could add
display: flex;
align-items: center;
justify-content: center;
to .hero
remove position element from hero, shape and shape2 class. then add
position:relative
to section1 class. then reduce the top margin of shape2 class. all that stuff at the bottom, the section2 and contact stuff with the arrows also seems off. It needs some tinkering as well
One technique to center abosolute positioned element is to add left: 50% and margin-left: negative 50% of the widht.
For example your shape:
.shape { content:url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
border-radius: 25px;
background:grey;
color:white;
padding:3px;
margin:200px auto 0 auto;
width:200px;
height:200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
width is 200px so we add margin-left: -100px and left: 50%;
here is the fork of your codepen: http://codepen.io/adrianrios/pen/ZeaaNN