You want to implement the Top Menu and Left Side Menu.
The top menu is fixed to the top.
I want to implement the Left Side Menu so that it can be seen right below the Top Menu, but it is not going well.
If we open the Left Side Menu, we would like to solve the problem of covering the top menu, so please give us some advice.
index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Link -->
<link rel="stylesheet" href="assets/css/left_sidemenu.css">
<link rel="stylesheet" href="assets/css/top_menu.css">
<!---Fontawsome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<!----Jquery CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<title>SideBar sub menus</title>
</head>
<body id="body-pd">
<!-- top_menu -->
<nav class="navbar ">
<!-- logo_link -->
<div class="navbar__logo">
<i class="fa-solid fa-laptop-code"></i>
Project
</div>
<!-- menu_link -->
<ul class="navbar__menu">
<li>Login</li>
<li>Sign</li>
</ul>
</nav>
<!-- top_menu -->
<!-- left_sidemenu -->
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
Bedimcode
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Messenger</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Projects</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Analytics</span>
</a>
<div href="#" class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
Data
Group
Members
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Settings</span>
</a>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav_name">Log out</span>
</a>
</div>
</nav>
</div>
<!-- left_sidemenu -->
<h1>Componentes</h1>
<!-- IONICONS -->
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<!-- JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
left_sidemenu.css code
/* left_sidemenu.css */
/* GOOGLE FONTS */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap");
/* VARIABLES CSS */
:root {
--nav--width: 92px;
/* Colores */
--first-color: #0c5df4;
--bg-color: #12192c;
--sub-color: #b6cefc;
--white-color: #fff;
/* Fuente y tipografia */
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/* z index */
--z-fixed: 100;
}
/* BASE */
*, ::before, ::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1 {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/* l NAV */
.l-navbar {
position: fixed;
/* top: 0; */
left: 0;
width: var(--nav--width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/* NAV */
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav_name {
font-size: var(--small-font-size);
}
/* Expander menu */
/* width: calc(var(--nav--width) + 9.25rem); */
.expander {
width: calc(var(--nav--width) + 12rem);
}
/* Add padding body*/
.body-pd {
padding: 2rem 0 0 16rem;
}
/* Active links menu */
.active {
background-color: var(--first-color);
}
/* COLLAPSE */
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5;
}
.collapse__menu {
display: none;
padding: .75rem 2.25rem;
/*
padding: 0px;
margin: 0px;
overflow: auto;
position: fixed;
*/
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color);
}
/* Show collapse */
.showCollapse {
display: block;
}
/* Rotate icon */
.rotate {
transform: rotate(180deg);
transition: .5s;
}
left_sidemenu.js code
/* left_sidemenu.js */
/* EXPANDER MENU */
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if( toggle && navbar ) {
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('expander');
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle', 'navbar', 'body-pd')
/* LINK ACTIVE */
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
/* COLLAPSE MENU */
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for(i=0;i<linkCollapse.length;i++) {
linkCollapse[i].addEventListener('click', function(){
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
});
}
top_menu.css code
/* top_menu.css */
:root {
--text-color: #f0f4f5;
--background-color: #12192c;
--accent-color: orange;
--icons-color: rgb(152, 187, 201);
--bodybackground-color: rgb(255, 255, 255);
}
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 75px;
}
a {
font-size: 20px;
text-decoration: none;
color: var(--text-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--background-color);
padding: 8px 12px;
font-family: 'STIX Two Math';
position: fixed;
/* width: 100% */
top: 0;
left: 0;
right: 0;
}
.navbar__logo i {
color: var(--accent-color);
padding-left: 0;
}
.navbar__menu {
list-style: none;
display: flex;
margin: 0;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 30px;
}
.navbar__menu li:hover {
background-color: var(--accent-color);
border-radius: 3px;
}
#media screen and (max-width: 700px) {
}
#font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve#1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
font: normal 1rem/1.5rem 'Cafe24Oneprettynight', serif;
background: url('https://images.unsplash.com/photo-1505312926838-645f295a20e1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1234&q=80')no-repeat center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 50px;
background: rgba(0, 0, 0, .4);
}
p {
color: #aaa;
margin-bottom: 10px;
}
p:hover {
color: #fff
}
p:hover {
width: 100%;
transition: width .3s;
}
Screenshot 1
Screenshot 2
This is happening bcs you've added padding to the top_menu item. It can be fixed by reducing the padding you've given in the top_menu.css file like so:
body {
margin: 0;
background-color: var(--bodybackground-color);
font-family: 'STIX Two Math';
padding-top: 45px;
}
As for the nav bar covering the header once expanded. The reason it is happening is because you're adding padding to the existing element. I would change the left_sidemenu.css file like so:
/* Add padding body*/
.body-pd {
/* padding: rem 0 0 16rem; */
}
Either that or you can simply not add top padding so that the nav bar only expands to the side. One other option I could suggest instead, is to change the z-index so that the nav bar comes behind the header.
I was wondering if there is a way to loop through the height on my menu dropdown and make it slide down, instead of just appearing like it does now?
I was trying to do something like this:
var list = document.getElementById("list");
var listElements = list.childElementCount;
var height = 1.5 * listElements;
var x = document.getElementById("burgerMenu");
if (x.style.height === "0rem") {
x.style.height = height + "rem";
} else {
x.style.height = "0rem";
}
But can't seem to get it right...
I know I need to add a transition and then change the height of the div, but I'm a bit stuck on how exactly.
The JS event listener just listen if there is a click on the three lines or if it's something else, it removes the class (outside of three lines) or toggle (clicking on three lines).
I think the animation should be on topnav-menu or am I wrong, since this is the div with the content in it.
window.addEventListener('click', function(e) {
var menu = document.querySelector('.right-nav');
if (!document.querySelector('.outsideOfBurger').contains(e.target)) {
// Outside of burger menu / item clicked inside the burger menu
menu.classList.remove('open-hamburguer');
} else {
// Three burger menu lines clicked, so we toggle hide/show
menu.classList.toggle('open-hamburguer');
}
});
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--clr-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav a {
color: blue;
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position: relative;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px;
transition: all .5s ease;
background-color: none;
padding: 0;
max-height: 0;
position: absolute;
top: 100%;
/* distance itself 100% of the height of parent element */
right: 0;
/* aligned on the right of container */
opacity: 0;
display: none;
/* just to hide it (overwritten when toggle('open-hamburguer') is clicked) */
}
.open-hamburguer .topnav-menu {
opacity: 1;
display: block;
max-height: 300px;
/* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
margin: 0;
padding: 0;
list-style: none;
box-shadow: var(--clr-box-shadow);
border-radius: 15px;
/* border-radius is also set here else the shadow looks wired */
}
.topnav-menu ul li:last-child {
border-top: 1px solid gray;
/* last item border -> above Login/Logout */
}
.topnav-menu ul li:first-child a {
border-radius: 15px 15px 0 0;
/* round borders on start */
}
.topnav-menu ul li:last-child a {
border-radius: 0 0 15px 15px;
/* round borders on end */
}
.topnav-menu a {
color: var(--clr-nav-color);
background-color: var(--menu-card-color);
display: block;
text-align: left;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
transition: all .5s ease;
}
.topnav-menu a:hover {
color: black;
}
.topnav-menu a.active {
color: black;
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
<a href="#burger-menu" class="burger-menu outsideOfBurger">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<div class="topnav-menu outsideOfBurger" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>This is a bit longer text to show it splits into new line</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Info</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
You can give height:0 instead of display:none to achieve slide transition. Also add overflow:hidden so it won't show content when the height is 0 and once the menu toggles you can give height:auto
window.addEventListener('click', function(e) {
var menu = document.querySelector('.right-nav');
if (!document.querySelector('.outsideOfBurger').contains(e.target)) {
// Outside of burger menu / item clicked inside the burger menu
menu.classList.remove('open-hamburguer');
} else {
// Three burger menu lines clicked, so we toggle hide/show
menu.classList.toggle('open-hamburguer');
}
});
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--clr-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav a {
color: blue;
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position: relative;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px;
transition: all .5s ease;
background-color: none;
padding: 0;
max-height: 0;
position: absolute;
top: 100%;
/* distance itself 100% of the height of parent element */
right: 0;
/* aligned on the right of container */
opacity: 0;
height:0;
overflow:hidden;
/* just to hide it (overwritten when toggle('open-hamburguer') is clicked) */
}
.open-hamburguer .topnav-menu {
opacity: 1;
display: block;
max-height: 300px;
height:auto;
/* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
margin: 0;
padding: 0;
list-style: none;
box-shadow: var(--clr-box-shadow);
border-radius: 15px;
/* border-radius is also set here else the shadow looks wired */
}
.topnav-menu ul li:last-child {
border-top: 1px solid gray;
/* last item border -> above Login/Logout */
}
.topnav-menu ul li:first-child a {
border-radius: 15px 15px 0 0;
/* round borders on start */
}
.topnav-menu ul li:last-child a {
border-radius: 0 0 15px 15px;
/* round borders on end */
}
.topnav-menu a {
color: var(--clr-nav-color);
background-color: var(--menu-card-color);
display: block;
text-align: left;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
transition: all .5s ease;
}
.topnav-menu a:hover {
color: black;
}
.topnav-menu a.active {
color: black;
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
<a href="#burger-menu" class="burger-menu outsideOfBurger">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<div class="topnav-menu outsideOfBurger" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>This is a bit longer text to show it splits into new line</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Somthing</li>
<li>Info</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
I'm currently trying to create a website from scratch, seen as I have the time to practice.
So far, I have got a working navigation bar (one which does not actually take you to other pages yet but does actually work ).
I decided to make this navigation bar responsive, as it is quite a big bar.
I have given the option of a vertical bar at a click of a button.
To note, the button is only available to the user when the browser is less than 900px width.
My current issue is that when the button is pressed, nothing is being displayed. I have ensured the javascript for the button is working, via trial and error but still have no luck.
I am new to this, so forgive me if my error is silly but any help would be greatly appreciated.
To help give an idea of what I am trying to achieve, here is the link I have been using as guidance: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
If the issue lays within the fact that I am using an 'unordered list' tag to align my navigation bar to the right and my logo to the left, then any alternative way is welcome too!
Thank you.
P.s. ignore the names of each section in the navigation, I was just filling in the spaces for now ^^
body{
background-color: grey;
margin:0;
}
/*----------------------NAVIGATION BAR----------------------*/
.nav-container{
background-color: white;
float: right;
height: 80px;
position: absolute;
width: 100%;
margin-top: 0;
}
#nav-menu{
float:right;
padding: 13px 13px;
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
float: left;
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 900px) {
#nav-menu li a:not(.icon) {display: none;}
#nav-menu li a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 900px) {
.nav-bar.responsive {position: relative;}
.nav-bar.responsive li a.icon{
position: relative;
right: 0;
top: 0;
}
.nav-bar.responsive li a{
float: none;
display: block;
text-align: left;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="practice.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="nav-container">
<ul id="logo">Dellion</ul>
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a></li>
</ul>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
</script>
</body>
</html>
Simplify your layout by using flexbox
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
body {
background-color: grey;
margin: 0;
}
.nav-container {
display: flex;
background-color: white;
min-height: 80px;
width: 100%;
align-items: center;
flex-wrap: wrap;
}
#logo {
font-size: 27px;
padding: 0 13px;
height: 80px;
line-height: 80px;
}
.nav-bar {
flex-direction: row;
}
.nav-bar li {
list-style: none;
}
.nav-bar a {
color: #000;
font-size: 20px;
padding: 10px 12px;
text-decoration: none;
}
.nav-links {
margin-left: auto;
padding-right: 20px;
display: flex;
flex: 1;
justify-content: flex-end;
}
.hamburger .icon {
/* remove the styling, this code is for illustration purpose only*/
height: 40px;
width: 40px;
background: grey;
border: 1px solid #000;
}
.nav-bar,
.hamburger .icon {
display: none;
}
.hamburger {
position: absolute;
right: 20px;
top: 20px;
}
#media screen and (min-width: 901px) {
.nav-bar,
.nav-bar.responsive {
display: flex;
align-items: center;
}
}
#media screen and (max-width: 900px) {
.hamburger .icon {
display: block
}
.nav-bar.responsive {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
}
.nav-links {
flex-basis: 100%;
margin: 0;
padding: 0;
}
.nav-bar li {
padding: 10px 0;
}
}
<div class="nav-container">
<div id="logo">Dellion</div>
<div class="nav-links">
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
</ul>
<div class="hamburger">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>
</div>
</div>
There is a very simple way:
.nav-container{
background-color: white;
/* float: right; */
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 0;
}
#nav-menu{
/* float:right; */
/* padding: 13px 13px; */
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
/* float: left; */
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
And I recommended you to read this useful article about css Flexbox.
I think part of your problem is, :
Javascript:
if (x.className === "nav-bar") {
x.className += " responsive"; //add space after quotation mark, otherwise class is added adjacent
} else {
x.className = "nav-bar";
}
Css:
.nav-bar.responsive li a{
float: none;
display: block !important; /* I think this needs to be crushed with important */
text-align: left;
/* position: relative; you don't need it */
}
you can simply do it with css
flex-direction: column;
Hello I created a menu underline in javascript. How do I stop the underline from going on the dropdown menu links? The problem is when I move the mouse out the menu and you still see the line.
Please let me know what is the best way to fix this. Thank you so much.
https://codepen.io/rubenjr005/pen/ExjQdjw?fbclid=IwAR1iXxZro17fFRKXmWKmi4N6sj0d_mRL6g4-MeVNaHip4IvUYM4YtCGJDPc
(function() {
const target = document.querySelector(".target");
const links = document.querySelectorAll(".mynav a");
const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) {
for (let i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
const width = this.getBoundingClientRect().width;
const height = this.getBoundingClientRect().height;
const left = this.getBoundingClientRect().left + window.pageXOffset;
const top = this.getBoundingClientRect().top + window.pageYOffset;
const color = colors[Math.floor(Math.random() * colors.length)];
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
target.style.borderColor = color;
target.style.transform = "none";
}
}
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => e.preventDefault());
links[i].addEventListener("mouseenter", mouseenterFunc);
}
function resizeFunc() {
const active = document.querySelector(" .mynav li.active");
if (active) {
const left = active.getBoundingClientRect().left + window.pageXOffset;
const top = active.getBoundingClientRect().top + window.pageYOffset;
target.style.left = `${left}px`;
target.style.top = `${top}px`;
}
}
window.addEventListener("resize", resizeFunc);
})();
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
/*
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.color-overlay-container {
justify-content: center;
align-items: center;
position: relative;
}
.color-overlay {
width: 100%;
height: 100%;
background: #000;
opacity: .5;
z-index: 2;
position: absolute;
}
.btn-black{
padding: 1.5rem 2rem;
color: white;
background: black;
text-transform: uppercase;
font-weight: 900;
}
.btn-yellow{
padding: 1.5rem 2rem;
color: white;
background: #f7c51e;
text-transform: uppercase;
font-weight: 900;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
}
a {
text-decoration: none;
}
p {
margin: .5rem 0;
}
/* Utility Classes */
/* Grid Container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
margin: auto;
grid-auto-rows: minmax(200px, auto);
}
.grid-container-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
margin: auto;
}
.card {
background: #fff;
padding: 1rem;
}
/* Grid Container - END */
.container {
max-width: 1404px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-yellow {
color: #f7c51e;
}
.bg-yellow {
background: #f7c51e;
color: black;
}
.bg-grey {
background: #f9f9f9;
color: black;
}
.l-heading {
font-weight: bold;
font-size: 4rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.lead {
font-size: 1.3rem;
margin: 0.75rem 0;
}
/* Padding */
.py-1 {
padding: 1.5rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
/* All Around Padding */
.p-1 {
padding: 1.5rem;
}
.p-2 {
padding: 2rem;
}
.p-3 {
padding: 3rem;
}
/* Utility Classes - END */
/* ================ HOME PAGE ==================== */
/* HEADER */
.site-header {
background-color: transparent;
}
.site-header .header-container {
background: black;
color: white;
}
/* BLACK BAR */
.site-header .header-container .header-container_wrap {
padding: 30px 5px;
/* background: red; */
}
#masthead .header-container .header-container_wrap .items {
display: flex;
}
#masthead .header-container .header-container_wrap .items .contact-info {
display: flex;
}
#masthead .header-container .header-container_wrap .items .quality-logo {
margin-right: 3rem;
line-height: 5px;
}
#masthead .header-container .header-container_wrap .items .quality-logo p {
font-size: 14px;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item {
display: flex;
align-items: center;
margin-right: 1rem;
}
#masthead .header-container .header-container_wrap .items .item .facebook-like {
text-align: center;
}
#masthead .header-container .header-container_wrap .items .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
}
#masthead .header-container .header-container_wrap .items .contact-info .item .fas {
font-size: 18px;
color: #f7c51e;
margin-right: 1.5rem;
background: black;
border-radius: 50%;
padding: 10px;
border: 1px solid #363636;
}
/* ========================== Bottom White Header Menu - START ================ */
/* Menu Underline */
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: 100;
transform: translateX(-60px);
pointer-events: none;
}
.mynav a,
.target {
transition: all .35s ease-in-out;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: white;
overflow: hidden;
padding: 1rem;
}
#myTopnav .items {
display: flex;
justify-content: space-between;
align-items: center;
}
#myTopnav .items .item .mynav ul{
display: flex;
align-items: center;
}
#myTopnav .items .item .mynav ul li{
display: flex;
align-items: center;
}
#myTopnav .items .item .mynav ul li:nth-child(4){
margin-left: .5rem;
/* background-color: red; */
}
/* Style the links inside the navigation bar */
.topnav a {
/* float: left;
display: block; */
color: rgb(94,94,94);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
}
/* Add an active class to highlight the current page */
/*
.active {
color: black;
font-weight: 600;
color: #363636;
} */
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* ============================ DROP DOWN MENU =============================== */
/* Dropdown container - needed to position the dropdown content */
.dropdown {
/* float: left; */
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: rgb(94,94,94);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-transform: uppercase;
font-weight: 600;
display: flex;
align-items: center;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f7c51e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: rgb(94,94,94);
}
/* Style the links inside the dropdown */
.mynav .dropdown-content a {
font-size: 14px;
font-weight: 500;
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
text-transform: uppercase;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
/* background-color: red; */
color: black;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
/* background-color: red; */
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
z-index: 101;
}
/* SEARCH ICONS */
#myTopnav .items .item .fa-search{
font-size: 1.25rem;
color: #363636;
}
/* ========================== Bottom White Header Menu - END ================ */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- CSS STYLES -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css">
<!-- Swiper Header Slider -->
<!-- <link rel="stylesheet" href="/css/swiper.min.css"> -->
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> -->
<title>Document</title>
</head>
<body id="home">
<!-- Header Container -->
<!-- Navbar-Black -->
<div id="masthead" class="site-header">
<nav class="header-container">
<!-- Top Black Header Bar -->
<div class="header-container_wrap">
<div class="container">
<div class="items">
<div class="quality-logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo">
<p>Offering Quality work at a fair price to the Central Texas area.</p>
</div>
<div class="contact-info">
<div class="item">
<i class="fas fa-phone"></i>
<div class="contact-block__value-wrap">
<p> Call Today</p>
<p><strong>(972)-555-5555</strong></p>
</div>
</div>
<div class="item">
<i class="fas fa-clock"></i>
<div class="contact-block__value-wrap">
<p>Mon-Fri:<strong> 7am to 7pm</strong></p>
<p>Sat & Sun: 9am-4pm</p>
</div>
</div>
<div class="item">
<i class="fas fa-map-marker-alt"></i>
<p>Serving Central Texas</p>
</div>
<div class="item">
<div class="facebook-like">
<i class="fab fa-facebook-f"></i>
<p>LIKE US</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======================== Bottom White header START ======================-->
<div class="topnav" id="myTopnav">
<div class="container">
<div class="items">
<div class="item">
<nav class="mynav">
<!-- Menu Click Here -->
<!-- Hamburger -->
<ul>
<div class="hamburger">
<!-- <p class="active">Menu Click Here</p> -->
<p>Menu Click Here </p> ☰
</div>
<li>About
<!-- DROPDOWN MENU -->
<li>
<div class="dropdown">
<button class="dropbtn">
Services <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Brush Mulching & Land Clearing
Mapping & Measurement
Erosion Mitigation / Driveways / Roads
Landscaping & Drainage Management
Foundation & Pads
General Dirt Work & Tank Pond Trenching
Demolition & Clean Up
Septic Installation
</div>
</div>
</li>
<!-- DROPDOWN MENU END -->
<li>Photo Gallery</li>
<li>Video Example</li>
<li>Contacts</li>
<!-- ☰ -->
</ul>
</nav>
</div>
<div class="item">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
<span class="target"></span>
<!-- ======================== Bottom White header END ======================-->
</nav>
</div>
<!-- HEADER CONTAINER END -->
You can add another event listener that will check if the mouse leaves the whole navigation.
Then you can remove the inline style, thus reseting the target element.
document.querySelector(".mynav").addEventListener("mouseleave", function() {
target.removeAttribute("style");
})
Hi I have tried to develop off of the Skeleton Framework and have adjusted the grid design. Although everything is slow falling into place I cannot find where this small gap is coming from on the right hand side. See below picture for what I mean. I have attached the CSS and HTML page. Apologies for the mess of CSS its three style sheets in one. Any suggestion would be great as I feel I may not be able to see the trees through the forest at this point.
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
#media (min-width: 1050px) {
.container {
width: 80%;
}
.column,
.columns {
margin-left: 0;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 8.333%;
}
.two.columns {
width: 16.66%;
}
.three.columns {
width: 25%;
}
.four.columns {
width: 33.33%;
}
.five.columns {
width: 41.66%;
}
.six.columns {
width: 50%;
}
.seven.columns {
width: 58.33%;
}
.eight.columns {
width: 66.663%;
}
.nine.columns {
width: 75%;
}
.ten.columns {
width: 83.33%;
}
.eleven.columns {
width: 91.66%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78.0%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
/* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1 {
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
#media (min-width: 550px) {
h1 {
font-size: 5.0rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3.0rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
p {
margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB;
}
a:hover {
color: #0FA0CE;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0;
}
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol,
ul {
padding-left: 0;
margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
/*li {
margin-bottom: 1rem; }*/
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem;
}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both;
}
/* Navigation Bar
-------------------------------------------------- */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {
background-color: #111;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width: 680px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width: 680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {} .full-width-container {
width:100%;
max-width:100%;
clear:both;
margin:0 auto;
}
/* CSS Document */
.cBox {
border-right:2px #DADADA solid;
}
.cBoxCenter {
text-align:center;
border-right:2px #DADADA solid;
padding:1%;
}
.cBoxMain {
border-top:2px #DADADA solid;
}
.cBoxEnd {
text-align: center;
}
button {
color: white;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6e00+0,cc0600+100 */
background: #ff6e00;
/* Old browsers */
background: -moz-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff6e00 0%, #cc0600 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#cc0600', GradientType=0);
/* IE6-9 */
border: 0;
}
.content {
background-image: url(../img/hbg.png);
}
.subcontent {
background-image: url(../img/hbg.png);
}
.columns img {
max-width: 100%;
}
.content .columns {
padding: 2%;
}
.columns {} .row {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
-webkit-box-flex: 0;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.fillimage {
background-image: url(../img/ldn.jpg);
background-position: center;
background-size: cover;
}
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,700,700italic);
/* CSS Document */
html,
body {
background-image: url(../img/bg.png);
font-family: 'Open Sans', sans-serif;
height: 100%;
}
.head {
background-image: url(../img/hbg.png);
}
.head img {
max-width: 100%;
}
.logo {
padding: 2rem;
}
.logo img {
display: block;
margin: auto;
display: block;
margin: auto;
float: left;
max-height: 100%;
}
.headerimage {} .headerimage img {
display: block;
margin: auto;
float: left;
max-height: 100%;
}
/* ----- Contract Form ---- */
#form {
min-width: 300px;
max-width: 600px;
margin: auto;
font-family: sans-serif;
}
#form h2 {
color: #27748A;
font-size: 35px;
margin: 0;
}
#form p {
font-size: 20px;
color: #222222;
}
#form div {
margin-top: 10px;
}
#form input,
textarea,
button {
width: 50%;
padding: 3px 5px;
}
#form label {
font-weight: bold;
font-size: 20px;
color: #184552;
}
#form button {} #form button:hover {
background-color: #CBEAF2;
}
.required {
color: #dd6666;
}
#footer {
background-image: url(../img/bg2.png);
display: block;
color: white;
}
#footer .columns {
padding: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Central Computers</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ccframe.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/content.css">
</head>
<body>
<!-- Primary Page Layout -->
<div class="container">
<!-- Header -->
<div class="row">
<div class="columns head">
<div class="four columns logo">
<img src="img/logo.png" alt="Logo">
</div>
<div class="eight columns headerimage">
<img src="img/london.png" alt="London">
</div>
</div>
</div>
<!-- Header -->
<!-- Nav Bar -->
<div class="row">
<div class="twelve columns">
<ul class="topnav">
<li>Home</li>
<li>Buyers</li>
<li>Sellers</li>
<li>Student Property</li>
<li>Hotels</li>
<li>News</li>
<li>Contact</li>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<!-- Nav Bar -->
<!-- Content -->
<div class="row subcontent ">
<div class="four columns cBoxCenter">
<h3>BUYERS</h3>
<p>
If you are a Buyer, looking for Off-Market Properties in prime central locations, then please get in contact with …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxCenter ">
<h3>SELLERS</h3>
<p>
If you have properties you wish to sell privately through our off-market collection, we can promote them for you …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxEnd fillimage">
</div>
</div>
<div class="row content">
<div class="eight columns cBoxMain cBox">
<h2>Off-Market Properties UK</h2>
<p>If you are looking to buy or sell off-market properties, then you certainly have come to the right place. Off-Market Properties UK has over 30 years of experience in the global property business and we have many clients with an appetite for off-market properties to whom we already offer an expanding portfolio of outstanding development opportunities. Many of the off-market properties we listed this year sold within one month.</p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off-Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties and development opportunities in other parts of the UK. Basically, wherever the market is most dynamic. If you own a property in an area where we do not yet cover, still try us.</p>
<p>Why go off market? We understand that many property owners prefer to sell their properties privately and not publicly. Confidentiality is usually the reason, perhaps for family reasons or because the owner has a high profile. An advantage to owners is that interest in off market properties tend often to come from serious investors able to exchange quickly.</p>
</div>
<div class="four columns cBoxMain">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you#yourdomain.com' required />
</div>
<div>
<label for='message'>Message <span class='required'>(required)</span></label>
<textarea name='message' required></textarea>
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
<!-- Content -->
</div>
<!-- Container -->
<!-- Footer -->
<div class="full full-width-container" id="footer">
<div class="container">
<div class="row">
<div class="four columns">
<h4>Contact Us</h4>
<p>Please get in contact with us to learn more about our Off-Market Properties:</p>
<p>Tel: +44 208 920 9414<br>
Mob: +44 7463 424 888<br>
Email: om#offmarketpropertiesuk.com</p>
<p><img src="img/logo.png" width="300" height="85"></p>
</div>
<div class="four columns">
<h4>Off Market Properties UK</h4>
<p>If you are looking to buy or sell an off-market properties, then you certainly have come to the right place. </p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties in other parts of the UK.</p>
</div>
<div class="four columns" style="overflow:hidden;">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you#yourdomain.com' required />
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
<script src="js/menu.js"></script>
</html>
You should remove container width from here
#media (min-width: 400px) {.container {
// width: 85%; //commented width
padding: 0;
}
}
Turns out after much more thinking and banging of the head and desk I realized my calculations are off by a fraction.
Turns out I forgot to round up the final decimal digit place.
.one.column,
.one.columns { width: 8.33333333333%; }
.two.columns { width: 16.6666666667%; }
.three.columns { width: 25.0%; }
.four.columns { width: 33.3333333333%; }
.five.columns { width: 41.6666666667%; }
.six.columns { width: 50.0%; }
.seven.columns { width: 58.3333333333%; }
.eight.columns { width: 66.6666666667%; }
.nine.columns { width: 75.0%; }
.ten.columns { width: 83.3333333333%; }
.eleven.columns { width: 91.6666666667%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }