I am trying to make a box appear that starts at the bottom of the green buttons. For now, it's red. I made the top navbar with CSS Grid, but not the red box. How do make it overlap the navbar?
Here is more (pointless) words it forced me to add since my post is "mostly code". What an absolute joke.
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell, AiOutlineSearch } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<div>
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" placeholder="Search" className="form-control" />
<button className="searchBtn"><AiOutlineSearch /></button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">
<FiMail /></button>
</li>
<li className="btn">
<button className="icon-btn"><FaPlus /></button>
</li>
<li className="btn">
<button className="icon-btn"><AiTwotoneBell /></button>
</li>
<li className="btn">
<button className="icon-btn"><BsFillPersonFill /></button>
</li>
</ul>
</div>
</nav>
<div>
<div className="container">
<h2 className="homeBtn hide"></h2>
<div className="search">
</div>
<div className="container col-sm-4" xs={6}>
<div className="card" style={{width: "200px", height: "300px", padding: "20px"}}>
<h5 className="text-center" > </h5>
<a className="text-center">
</a>
<p className="text-center"></p>
</div>
</div>
{/* <li className="btn">
<div className="dropdown">lol</div>
</li> */}
</div>
</div>
</div>
)
}
export default Navbar;
navbar.css
* {
margin:0;
padding:0;
box-sizing:border-box;
}
ul {
list-style: none;
display: flex;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
text-align: center;
justify-content: center;
padding-left: 25%;
color:#00ce7f;
}
#nav-bar {
background-color: #626466;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
height: 55px;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 70%;
border: none;
padding-left: 10px;
font-size: 20px;
}
.search {
padding-left: 15%;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
padding-right: 20px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
font-size: x-large;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-size: large;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 40px;
border: none;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
.profileSettings {
background-color: red;
padding-left: 50px;
padding-right: 50px;
text-align: center;
width: 100px;
border: rgb(111, 0, 255);
border-style: solid;
}
.hide {
visibility: hidden;
}
.dropdown {
height: 120px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
font-size: x-large;
}
.card {
background-color: red;
}
In this case, I would like to make the sidebar fixed. This will also make sure that the sidebar will overlap over the navbar, and you will have the full-screen sidebar.
The following snippet should work for you.
.sidebar { position: fixed; top: 0; right: 0; height: 100vh; width: 350px; background: red; z-index: 1; }
I would like to do a responsive stepper where in the lines in between steppers are connected to each step. Currently only workable with 4 steps, it becomes not responsive once it is more or less than 4 steps.
Here is the jsfiddle, currently workable with 4 steps.
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
I tried to change this part but it doesn't seem to work. Thanks for advance!
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet completed">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet completed">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet completed">3</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">4</div>
</div>
</div>
</div>
Modify your .bullet.completed::after to display:flex, and set its width to 100% minus a modified margin-left value, which is equal to the width of the .bullet (20px):
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
display:flex; /* Added */
width:calc(100% - 20px); /* Modified */
background-color: #000;
margin-left: 20px; /* Modified */
}
Here it is with seven steps:
const previousBtn = document.getElementById('previousBtn');
const nextBtn = document.getElementById('nextBtn');
const finishBtn = document.getElementById('finishBtn');
const content = document.getElementById('content');
const bullets = [...document.querySelectorAll('.bullet')];
const MAX_STEPS = 7;
let currentStep = 1;
nextBtn.addEventListener('click', () => {
bullets[currentStep - 1].classList.add('completed');
currentStep += 1;
previousBtn.disabled = false;
if (currentStep === MAX_STEPS) {
nextBtn.disabled = true;
finishBtn.disabled = false;
}
content.innerText = `Step Number ${currentStep}`;
});
previousBtn.addEventListener('click', () => {
bullets[currentStep - 2].classList.remove('completed');
currentStep -= 1;
nextBtn.disabled = false;
finishBtn.disabled = true;
if (currentStep === 1) {
previousBtn.disabled = true;
}
content.innerText = `Step Number ${currentStep}`;
});
finishBtn.addEventListener('click', () => {
location.reload();
});
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width:calc(100% - 20px);
display:flex;
background-color: #000;
margin-left: 20px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">3</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">4</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">5</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">6</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">7</div>
</div>
</div>
<div id="main">
<p id="content" class="text-center">Step Number 1</p>
<button id="previousBtn" class="hidden"></button>
<button id="nextBtn">Next</button>
<button id="finishBtn" class="hidden">Finish</button>
</div>
</div>
I'm trying to fit my sticky left menu to the height of my content, but I'm not be able to do it.
I try adding height: 100% to all parents div, but nothing happens
My code is: (before is and )
<main>
<div class="container">
<div class="content-wrapper">
<router-view />
</div>
<div class="navigation__menu">
<div
class="container-menu"
:class="{'show': this.$store.getters.showSidebar}">
<main-menu
#click.native="showNav" />
<menu-options />
</div>
</div>
</div>
</main>
<template>
<div id="main-menu">
<div class="control">
<i
class="fas fa-angle-double-right" />
</div>
</div>
</template>
<template>
<div id="menu-options">
<div
class="navigation-icons-menu">
<a
title="Home"
href="/"><i class="fas fa-home" /></a>
<a
title="FIG"
href="/fig-console"><i class="fas fa-clipboard-list" /></a>
<a
title="Service client"
href="/"><i class="fas fa-users" /></a>
<a
title="Budget"
href="/"><i class="fas fa-file-invoice" /></a>
<a
title="Contracting"
href="/"><i class="fas fa-file-contract" /></a>
<a
title="Invoicing"
href="/"><i class="fas fa-file-invoice-dollar" /></a>
<a
title="Administration"
href="/"><i class="fas fa-cogs" /></a>
</div>
<div
v-if="this.$store.getters.showSidebar"
class="navigation-links-menu">
<transition-group name="fade">
<div
v-show="this.$store.getters.showLink"
key="1">
<a
title="Home"
href="/">Home</a>
</div>
<div
v-show="this.$store.getters.showLink"
key="2">
<a
title="FIG"
href="/fig-console">FIG</a>
</div>
<div
v-show="this.$store.getters.showLink"
key="3">Service client</div>
<div
v-show="this.$store.getters.showLink"
key="4">Budget</div>
<div
v-show="this.$store.getters.showLink"
key="5">Contracting</div>
<div
v-show="this.$store.getters.showLink"
key="6">Invoicing</div>
<div
v-show="this.$store.getters.showLink"
key="7">Administration</div>
</transition-group>
</div>
</div>
</template>
.container-menu {
position: absolute;
top: 65px;
padding-top: 10px;
left: 0;
width: 62px;
min-height: 100%;
height: 100%;
background-color: $navy;
border: solid $white;
border-width: 0 1px 0 0;
z-index: 1001;
transition: all .5s ease-in-out;
.control {
display: flex;
justify-content: center;
align-items: center;
//width: 50px;
margin-bottom: 10px;
color: $white;
i {
font-size: 2rem;
cursor: pointer;
transition: all .5s ease-in-out;
}
}
&.show {
width: 170px;
.control > i {
color: $white;
transform: rotateZ(-180deg);
}
}
.navigation-icons-menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50px;
float: left;
i {
color: $white;
font-size: 2rem;
padding: 10px 0;
cursor: pointer;
transition: all .5s ease-in-out;
&:hover {
color: $white;
}
}
}
.navigation-links-menu {
//padding:14px;
float: left;
color: $white;
div {
font-size: 1.35rem;
padding: 10px;
cursor: pointer;
#include breakpoint-only(tablet) {
font-size: 7px;
padding: 10px 5px;
}
a {
color: $white;
}
}
}
}
vh will solve your problem.
Instead of a pixel or percentage value. Use vh which stands for "viewport height".
An element with height: 100vh will be given a height the full height of the viewport.
.container-menu {
position: absolute;
top: 65px;
padding-top: 10px;
left: 0;
width: 62px;
height: 100vh;
background-color: $navy;
border: solid $white;
border-width: 0 1px 0 0;
z-index: 1001;
transition: all .5s ease-in-out;
.control {
display: flex;
justify-content: center;
align-items: center;
//width: 50px;
margin-bottom: 10px;
color: $white;
i {
font-size: 2rem;
cursor: pointer;
transition: all .5s ease-in-out;
}
}
&.show {
width: 170px;
.control > i {
color: $white;
transform: rotateZ(-180deg);
}
}
.navigation-icons-menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50px;
float: left;
i {
color: $white;
font-size: 2rem;
padding: 10px 0;
cursor: pointer;
transition: all .5s ease-in-out;
&:hover {
color: $white;
}
}
}
.navigation-links-menu {
//padding:14px;
float: left;
color: $white;
div {
font-size: 1.35rem;
padding: 10px;
cursor: pointer;
#include breakpoint-only(tablet) {
font-size: 7px;
padding: 10px 5px;
}
a {
color: $white;
}
}
}
}
I'm creating some Material Design buttons and I'm having some issues getting keyboard tab focus to work with my buttons. Ideally what I would like to do is mimic the effect found in Material UI when you tab through patterns:(https://material-ui-next.com/demos/buttons/), However, I would be happy with just getting focus to work.
I've tried adding class: focus to no avail. Any help would be appreciated
Codepen
<!-- header -->
<header>
<h2 tabindex="0">Material Design Buttons</h2>
</header>
<!-- #end header -->
<!-- Main content -->
<main role="main">
<section>
<h3 class="heading">Raised Buttons</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue" tabindex="0">Primary</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
<div class="captions">keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Primary</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<section>
<h3 class="heading">Raised Buttons Secondary</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary" tabindex="0">Secondary</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
<div class="captions">Keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Secondary</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<section>
<h3 class="heading">Raised Buttons</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green" tabindex="0">CTA</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
<div class="captions">Keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">CTA</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<!-- <section>
<h3 class="heading">Raised Buttons Yellow</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow">Button</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow ripple-effect">Button</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-lightBlue" disabled>Button</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
<!-- <section>
<h3 class="heading">Link Buttons</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link">Button</button></div>
<div class="captions">Link Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link ripple-effect"><i class="material-icons">favorite_border</i>Button</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link" disabled>Button</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
<section>
<h3 class="heading">Buttons in Different Colors</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdTert-btn btn-white ripple-effect ripple-dark" tabindex="0">Tertiary Link</button></div>
<div class="captions">White</div>
</div>
<div class="holder col-4">
<div class="demo"><button style="border: none;" class="rkmd-btn btn-black ripple-effect" tabindex="0">Lorem Ipsum</button></div>
<div class="captions">Black</div>
</div>
<!-- <div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-grey ripple-effect ripple-dark"><i class="material-icons">file_download</i>Download</button></div>
<div class="captions">Grey</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
<div class="captions">Green</div>
</div> -->
</section>
<!-- <section>
<h3 class="heading">Fab Buttons</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button style="background: #ffffff; border: none; shadow: none;" class="rkmd-btn btn-fab btn-lightBlue ripple-effect"><i style="color: black;" class="material-icons">attach_file</i></button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-fab-mini btn-pink ripple-effect"><i class="material-icons">favorite_border</i></button></div>
<div class="captions">Mini Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-fab-mini btn-lightBlue" disabled><i class="material-icons">cloud_upload</i></button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
</main>
// Buttons Color
$Nutrien-green: #00B455;
$Nutrien-green--hover: #00DD68;
$Nutrien-greenSecondary: #FFF;
$Nutrien-greenSecondary--hover: #00DD68;
$Nutrien-yellow: #F9E051;
$Nutrien-yellow--hover: #E9CE1A;
$Nutrien-disabled: #DFDFDF;
$btn_default: #e0e0e0;
$btn_lightBlue: #00B455;
$btn_white: #FFF;
$btn_black: #111;
$btn_grey: #f5f5f5;
$btn_orange: #ff9800;
$btn_amber: #ffc107;
$btn_green: #4caf50;
$btn_teal: #009688;
$btn_cyan: #00bcd4;
$btn_indigo: #3f51b5;
$btn_deepPurple: #673ab7;
$btn_pink: #e91e63;
$btn_red: #f44336;
$btn_yellow: #ffeb3b;
$btn_lime: #cddc39;
$btn_brown: #795548;
// KEYFRAMES
#mixin keyframes($animation-name) {
#-webkit-keyframes #{$animation-name} {
#content;
}
#-moz-keyframes #{$animation-name} {
#content;
}
#-ms-keyframes #{$animation-name} {
#content;
}
#-o-keyframes #{$animation-name} {
#content;
}
#keyframes #{$animation-name} {
#content;
}
}
// Column generator
#mixin colmk($numRows, $margin) {
width: ((100% - (($numRows - 1) * $margin)) / $numRows);
&:nth-child(n) {
margin-right: $margin;
margin-bottom: $margin;
}
&:nth-child(#{$numRows}n) {
margin-right: 0;
margin-bottom: 0;
}
}
/* -----------------------------------------------------
Body
-------------------------------------------------------- */
body {
margin: 0;
padding: 0;
color: #646360;
font-size: 16px;
font-family: arial;
background-color: #eee;
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #03a9f4;
outline: none;
text-decoration: none;
&:hover { text-decoration: underline; }
}
/* -----------------------------------------------------
Main
-------------------------------------------------------- */
main {
width: 100%;
max-width: 940px;
margin: 1.4rem auto;
section {
display: block;
margin-bottom: 1.4rem;
padding: 1.2rem;
background-color: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.157);
&:last-child { margin-bottom: 0; }
.heading {
margin: 0;
padding: 0;
font-size: 1.2rem;
}
.wrap {
overflow: hidden;
display: block;
margin: 1rem 0 0.8rem;
text-align: center;
.holder {
float: left;
//display: inline-block;
//margin-right: 8px;
//margin-bottom: 8px;
text-align: center;
background-color: #fff;
&:last-child { margin-right: 0; }
&.col-3 {
//width: calc(100% / 3 - 8px);
#include colmk(3, 1%);
}
&.col-4 {
//width: calc(100% / 4 - 9px);
//&:nth-child(4n) { margin-right: 0; }
#include colmk(4, 1%);
}
.demo {
min-height: 120px;
padding: 2em 0;
display: flex;
justify-content: center;
align-content: center;
}
.captions {
padding: 8px;
color: rgba(0,0,0,0.5);
font-size: 13px;
font-weight: bold;
border-top: 1px solid rgba(0,0,0,0.1);
}
#media only screen and (max-width: 860px) {
&.col-4 {
#include colmk(3, 1%);
}
}
#media only screen and (max-width: 640px) {
float: none;
&.col-3,
&.col-4 {
display: block;
width: 100%;
&:nth-child(n) { margin: 0; margin-bottom: 14px; }
}
}
}
}
}
#media only screen and (max-width: 960px) {
padding: 0 1.5%;
}
}
/* -----------------------------------------------------
Header
-------------------------------------------------------- */
header {
display: block;
width: 100%;
padding: 12px 0;
text-align: center;
background-color: #FFF;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
h2 {
margin: 0;
padding: 25px 0;
font-size: 2em;
font-weight: 300;
letter-spacing: 1px;
}
}
/* -----------------------------------------------------
Footer
-------------------------------------------------------- */
footer {
display: block;
overflow: hidden;
width: 100%;
min-height: 80px;
background-color: #FFF;
border-top: 1px solid #EEE;
.row {
width: 100%;
max-width: 860px;
margin: 0 auto;
}
.footer-content {
margin: 0 8px;
padding: 25px 0 18px;
text-align: center;
span {
color: rgba(0, 0, 0, 0.525);
font-size: 0.857em;
margin-right: 5px;
}
}
#media only screen and (max-width: 768px) {
span {
display: block;
width: 100%;
margin-bottom: 8px;
}
}
}
/* ----------------------------------------------------------------------
Material Design Raised Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmdTert-btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
&:hover { }
}
.rkmd-btn {
border: 1px solid $Nutrien-green;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); border: 1px solid $Nutrien-greenSecondary--hover; }
}
.rkmdgrey-btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #A1A1A1;
background-color: #DFDFDF;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); }
}
.rkmdWhite-btn {
border: 1px solid #00B455;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: Arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background: $Nutrien-green--hover; color: white;
border: 1px solid $Nutrien-greenSecondary--hover;}
}
.rkmdYellow-btn {
border: 1px solid $Nutrien-yellow;
background-color: #F9E051;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 2px 16px 0 16px;
line-height: 35px;
color: black;
font-size: 14px;
font-weight: bold !important;
font-family: Arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background-color: #E9CE1A; border: 1px solid $Nutrien-yellow--hover;}
}
/* ----------------------------------------------------------------------
Material Design Fab Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-btn {
&.btn-fab,
&.btn-fab-mini {
overflow: hidden;
position: relative;
margin: auto;
padding: 0;
line-height: normal;
border-radius: 50%;
box-shadow: 0 2px 5px 1px rgba(0,0,0,0.3);
&:hover { box-shadow: 0 4px 11px 0px rgba(0,0,0,0.375); }
i {
display: inline-block;
float: none;
width: inherit;
margin: 0;
font-size: inherit;
text-align: center;
line-height: none;
vertical-align: middle;
}
}
&.btn-fab {
width: 56px;
height: 56px;
font-size: 28px;
}
&.btn-fab-mini {
width: 40px;
height: 40px;
font-size: 24px;
}
}
/* Buttons Color */
.rkmd-btn {
&.btn-lightBlue {
color: #FFF;
background-color: $btn_lightBlue;
&:hover { background-color: lighten($btn_lightBlue, 8%); }
}
&.btn-white {
color: #444;
background-color: $btn_white;
&:hover { background-color: darken($btn_white, 2%); }
}
&.btn-black {
color: #bdbdbd;
background-color: $btn_black;
&:hover { background-color: lighten($btn_black, 8%); }
}
&.btn-grey {
color: #757575;
background-color: $btn_grey;
&:hover { background-color: darken($btn_grey, 4%); }
}
&.btn-orange {
color: #FFF;
background-color: $btn_orange;
&:hover { background-color: lighten($btn_orange, 8%); }
}
&.btn-amber {
color: #FFF;
background-color: $btn_amber;
&:hover { background-color: lighten($btn_amber, 8%); }
}
&.btn-green {
color: #FFF;
background-color: $btn_green;
&:hover { background-color: lighten($btn_green, 8%); }
}
&.btn-teal {
color: #FFF;
background-color: $btn_teal;
&:hover { background-color: lighten($btn_teal, 8%); }
}
&.btn-cyan {
color: #FFF;
background-color: $btn_cyan;
&:hover { background-color: lighten($btn_cyan, 8%); }
}
&.btn-indigo {
color: #FFF;
background-color: $btn_indigo;
&:hover { background-color: lighten($btn_indigo, 8%); }
}
&.btn-deepPurple {
color: #FFF;
background-color: $btn_deepPurple;
&:hover { background-color: lighten($btn_deepPurple, 8%); }
}
&.btn-pink {
color: #FFF;
background-color: $btn_pink;
&:hover { background-color: lighten($btn_pink, 8%); }
}
&.btn-red {
color: #FFF;
background-color: $btn_red;
&:hover { background-color: lighten($btn_red, 8%); }
}
&.btn-yellow {
color: #FFF;
background-color: $btn_yellow;
&:hover { background-color: darken($btn_yellow, 13%); }
}
&.btn-lime {
color: #FFF;
background-color: $btn_lime;
&:hover { background-color: darken($btn_lime, 8%); }
}
&.btn-brown {
color: #FFF;
background-color: $btn_brown;
&:hover { background-color: lighten($btn_brown, 8%); }
}
}
/* Raised Buttons Size (Not work in Fab Buttons) */
.rkmd-btn {
&.btn-lg {
height: 48px;
line-height: 48px;
}
&.btn-sm {
height: 30px;
padding: 0 1rem;
line-height: 30px;
font-size: 12px;
}
&.btn-xs {
height: 24px;
padding: 0 .4rem;
line-height: 24px;
font-size: 11px;
font-weight: 300;
letter-spacing: .2px;
}
}
/* Raised Buttons Types */
.rkmd-btn {
&.disabled, &[disabled] {
cursor: default !important;
color: #9e9e9e !important;
box-shadow: none !important;
}
&.disabled:not(.btn-flat), &[disabled]:not(.btn-flat) {
background-color: #cdcdcd !important;
&:hover { background-color: #cdcdcd !important; }
}
&.btn-flat {
box-shadow: none !important;
background-color: transparent !important;
&:hover { background-color: #cecece !important; box-shadow: none !important; }
&.disabled:hover,
&[disabled]:hover { background-color: transparent !important; }
}
&.btn-link {
color: #3949ab !important;
box-shadow: none !important;
background-color: transparent !important;
&:hover {
text-decoration: underline !important;
background-color: transparent !important;
box-shadow: none !important;
}
&.disabled,
&[disabled] {
color: #9fa8da !important;
text-decoration: underline !important;
background-color: transparent !important;
}
&.disabled:hover,
&[disabled]:hover { background-color: transparent !important; }
}
i {
float: left;
width: auto;
height: auto;
margin-right: 10px;
font-size: 1.3rem;
line-height: inherit;
&.right {
float: right !important;
margin: 0;
margin-left: 10px;
}
}
}
/* ----------------------------------------------------------------------
Material Design Ripple Effect - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.ripple-effect {
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
vertical-align: middle;
user-select: none;
z-index: 1;
.ripple {
display: block;
position: absolute;
border-radius: 100%;
background: rgba(255,255,255,0.5);
transform: scale(0);
pointer-events: none;
}
&.ripple-dark {
.ripple {
background: rgba(0,0,0,0.1) !important;
}
}
&.ripple-red {
.ripple {
background: rgba(244,67,54,0.725) !important;
}
}
&.ripple-orange {
.ripple {
background: rgba(255,152,0,0.725) !important;
}
}
&.ripple-yellow {
.ripple {
background: rgba(255,235,59,0.725) !important;
}
}
&.ripple-green {
.ripple {
background: rgba(221,104,100,0.725) !important;
}
}
&.ripple-purple {
.ripple {
background: rgba(156,39,176,0.725) !important;
}
}
&.ripple-teal {
.ripple {
background: rgba(0,150,136,0.725) !important;
}
}
&.ripple-pink {
.ripple {
background: rgba(233,30,99,0.725) !important;
}
}
.animated {
animation: ripple 0.6s linear;
}
#include keyframes('ripple') {
100% {
opacity: 0;
transform: scale(2.5);
}
}
}
$(document).ready(function() {
$('.ripple-effect').rkmd_rippleEffect();
});
(function($) {
$.fn.rkmd_rippleEffect = function() {
var btn, self, ripple, size, rippleX, rippleY, eWidth, eHeight;
btn = $(this).not('[disabled], .disabled');
btn.on('mousedown', function(e) {
self = $(this);
// Disable right click
if(e.button === 2) {
return false;
}
if(self.find('.ripple').length === 0) {
self.prepend('<span class="ripple"></span>');
}
ripple = self.find('.ripple');
ripple.removeClass('animated');
eWidth = self.outerWidth();
eHeight = self.outerHeight();
size = Math.max(eWidth, eHeight);
ripple.css({'width': size, 'height': size});
rippleX = parseInt(e.pageX - self.offset().left) - (size / 2);
rippleY = parseInt(e.pageY - self.offset().top) - (size / 2);
ripple.css({ 'top': rippleY +'px', 'left': rippleX +'px' }).addClass('animated');
setTimeout(function() {
ripple.remove();
}, 800);
});
};
}(jQuery));
I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>
I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}
This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>
check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>