My website has a hamburger menu made with only HTML and CSS. When the hamburger icon is clicked and the menu activated, the menu titles are displayed over the background image instead of having a white background. (The hamburger menu has a transparent background.) How do I make it so that the menu displays OVER whatever is in the background, with its own white background?`
<div class="nav">
<h1>MA</h1>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
my work
about
contact
</div>
</div>
.nav {
text-align: right;
height: 50px;
line-height: 70px;
margin-bottom: 20px;
margin-top: 15px;
font-family: Gothic A1;
font-size: 20px;
color: black;
}
.menu {
margin: 0 30px 0 0;
background-color: white;
}
.menu a {
clear: right;
text-decoration: none;
color: black;
margin: 0 10px;
line-height: 70px;
padding-left: 30px;
}
.menu a:hover {
color: #edbecb;
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size: 50px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
padding-right: 30px;
}
.menu {
text-align: right;
width: 100%;
/* height: 1000px;*/
display: none;
background-color: white;
line-height: 50px;
margin-top: 0px;
padding-right: 30px;
}
.menu a {
display: block;
margin: 0;
background-color: white;
}
#toggle:checked + .menu {
display: block;
background-color: white;
position: absolute;
}
#toggle:checked + .menu a {
background-color: white;
position: absolute;
}
#toggle:checked + label {
background-color: white;
}
}
so I have been starting out with React and built a website, with bootstrap too, now there is this contact form that I want to make work, therefor I am using express and nodejs to do so.
The website was working, I created a separate folder "server" which stores the server.js file and the package.json
However, after I installed and created this file, I ran it and the css stopped working. I did not change anything in my app.js or css file
import React, { Component } from 'react'
import Navigation from './components/navigation';
import Header from './components/header';
import Features from './components/features';
import About from './components/about';
import Services from './components/services';
import Gallery from './components/gallery';
import Contact from './components/contact';
import JsonData from './data/data.json';
export class App extends Component {
state = {
landingPageData: {},
}
getlandingPageData() {
this.setState({landingPageData : JsonData})
}
componentDidMount() {
this.getlandingPageData();
}
render() {
return (
<div>
<Navigation />
<Header data={this.state.landingPageData.Header} />
<Features data={this.state.landingPageData.Features} />
<About data={this.state.landingPageData.About} />
<Services data={this.state.landingPageData.Services} />
<Gallery />
<Contact data={this.state.landingPageData.Contact} />
</div>
)
}
}
export default App;
Here is my css:
body, html {
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
color: #252525;
font-weight: 400;
width: 100% !important;
height: 100% !important;
}
h2, h3, h4 {
font-family: 'Raleway', sans-serif;
}
h2 {
text-transform: uppercase;
margin: 0 0 20px 0;
font-weight: 800;
font-size: 36px;
color: #fff;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #ddd;
}
h4 {
font-size: 18px;
color: #fff;
font-weight: 600;
}
h5 {
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
p {
font-size: 15px;
color: #fff;
}
p.intro {
margin: 12px 0 0;
line-height: 24px;
}
a {
color: #ff0000;
font-weight: 400;
}
a:hover, a:focus {
text-decoration: none;
color: #ff0000;
}
ul, ol {
list-style: none;
}
ul, ol {
padding: 0;
}
hr {
height: 2px;
width: 70px;
text-align: center;
position: relative;
background: #ff0000;
margin-bottom: 20px;
border: 0;
}
/* Navigation */
#menu {
transition: all 0.8s;
}
#menu.navbar-default {
background-color: #252525;
border-color: rgba(231, 231, 231, 0);
box-shadow: 0 0 10px rgba(0,0,0,0.15)
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-top: 1vh;
color: #fff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 15px;
font-weight: 400;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
#menu.navbar-default .navbar-nav > li > a:after {
display: block;
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%);
content: "";
transition: width 0.2s;
}
#menu.navbar-default .navbar-nav > li > a:hover:after {
width: 100%;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: -1px !important;
width: 100% !important;
height: 2px !important;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%) !important;
content: "" !important;
transition: width 0.2s !important;
}
.navbar-toggle {
border-radius: 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #252525;
border-color: #ff0000;
}
.navbar-default .navbar-toggle:hover>.icon-bar {
background-color: #ff0000;
}
.section-title {
margin-bottom: 70px;
}
.section-title h2 {
position: relative;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.section-title h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
.section-title p {
font-size: 18px;
}
.btn-custom {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
color: #fff;
background-color: #ff0000;
background-image: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 14px 34px;
letter-spacing: 1px;
margin: 0;
font-size: 15px;
font-weight: 500;
border-radius: 25px;
transition: all 0.5s linear;
border: 0;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom.focus, .btn-custom:active, .btn-custom.active {
color: #fff;
background-image: none;
background-color: #ff0000;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: none;
outline-offset: none;
}
/* Header Section */
.intro {
display: table;
width: 100%;
padding: 0;
background: url(../img/intro-bg.jpg) center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .overlay {
background: rgba(0,0,0,0.2);
}
.intro h1 {
font-family: 'Raleway', sans-serif;
color: #fff;
font-size: 82px;
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 10px;
}
.intro h1 span {
font-weight: 800;
color: #ff0000;
}
.intro p {
color: #fff;
font-size: 22px;
font-weight: 300;
line-height: 30px;
margin: 0 auto;
margin-bottom: 60px;
}
header .intro-text {
padding-top: 350px;
padding-bottom: 200px;
text-align: center;
}
/* Features Section */
#features {
padding: 100px 0;
background: #252525;
}
#features i.fa {
font-size: 38px;
margin-bottom: 20px;
transition: all 0.5s;
color: #fff;
width: 100px;
height: 100px;
padding: 30px 0;
border-radius: 50%;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
/* About Section */
#about {
padding: 100px 0;
background-color: #252525;
}
#about h3 {
font-size: 22px;
margin: 0 0 20px 0;
}
#about h2 {
position: relative;
margin-bottom: 15px;
padding-bottom: 15px;
}
#about h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
left: 0;
}
#about .about-text li {
margin-bottom: 6px;
margin-left: 6px;
list-style: none;
padding: 0;
color: #fff;
}
#about .about-text li:before {
content: '\f00c';
font-family: 'FontAwesome';
color: #ff0000;
font-size: 11px;
font-weight: 300;
padding-right: 8px;
}
#about img {
width: 520px;
margin-top: 10px;
background: #fff;
border-right: 0;
box-shadow: 0 0 50px rgba(0,0,0,0.06);
}
#about p {
line-height: 24px;
margin: 30px 0;
}
/* Services Section */
#services {
padding: 100px 0;
background: linear-gradient(to right, #252525 0%, #252525 100%);
color: #252525;
}
#services .service-desc {
margin: 10px 10px 20px;
}
#services h2 {
color: #fff;
}
#services .section-title h2::after {
position: absolute;
content: "";
background: #ff0000;
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
#services i.fa {
font-size: 42px;
width: 120px;
height: 120px;
padding: 40px 0;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
border-radius: 50%;
color: #fff;
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
#services h3 {
font-weight: 500;
padding: 5px 0;
color: #fff;
}
#services p {
color: rgba(255,255,255,.75);
}
#services .service-desc {
margin-bottom: 40px;
}
/* Portfolio Section */
#portfolio {
padding: 100px 0;
background-color: #252525;
}
.portfolio-item {
margin: 1px -15px 0 -14px;
padding: 0;
}
.portfolio-item .hover-bg {
overflow: hidden;
position: relative;
margin: 0;
}
.hover-bg .hover-text {
position: absolute;
text-align: center;
margin: 0 auto;
color: #fff;
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 30% 0 0 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 0.5s;
}
.hover-bg .hover-text>h4 {
opacity: 0;
color: #fff;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: all 0.3s;
font-size: 18px;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
}
.hover-bg:hover .hover-text>h4 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.hover-bg:hover .hover-text {
opacity: 1;
}
/* Testimonials Section */
#testimonials {
padding: 100px 0;
background: #f6f6f6;
}
#testimonials i {
color: #e6e6e6;
font-size: 32px;
margin-bottom: 20px;
}
.testimonial {
position: relative;
padding: 20px;
}
.testimonial-image {
float: left;
margin-right: 15px;
}
.testimonial-image, .testimonial-image img {
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
}
.testimonial-content {
position: relative;
overflow: hidden;
}
.testimonial-content p {
margin-bottom: 0;
font-size: 14px;
font-style: italic;
}
.testimonial-meta {
margin-top: 10px;
font-size: 15px;
font-weight: 600;
color: #666;
}
/* Team Section */
#team {
padding: 100px 0;
}
#team h4 {
margin: 5px 0;
}
#team .team-img {
width: 240px;
}
#team .thumbnail {
background: transparent;
border: 0;
}
#team .thumbnail .caption {
padding: 10px 0 0 0;
color: #888;
}
/* Contact Section */
#contact {
padding: 100px 0 60px 0;
background: linear-gradient(to right, #ff4e4e 0%, #ff4e4e 100%);
color: rgba(255,255,255,.75);
}
#contact .section-title {
margin-bottom: 40px;
}
#contact .section-title p {
font-size: 16px;
}
#contact h2 {
color: #fff;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
#contact .section-title h2::after {
position: absolute;
content: "";
background: #fff;
height: 4px;
width: 60px;
bottom: 0;
left: 30px;
}
#contact h3 {
color: #fff;
margin-top: 80px;
margin-bottom: 25px;
padding-bottom: 20px;
font-weight: 400;
}
#contact form {
padding-top: 20px;
}
#contact .text-danger {
color: #cc0033;
text-align: left;
}
#contact .btn-custom {
margin: 30px 0;
background: transparent;
border: 2px solid #fff;
}
#contact .btn-custom:hover {
color: #1f386e;
background: #fff;
}
label {
font-size: 12px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
float: left;
}
#contact .form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857143;
color: #444;
background-color: #fff;
background-image: none;
border: 1px solid #ddd;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
#contact .form-control:focus {
border-color: #999;
outline: 0;
-webkit-box-shadow: transparent;
box-shadow: transparent;
}
.form-control::-webkit-input-placeholder {
color: #777;
}
.form-control:-moz-placeholder {
color: #777;
}
.form-control::-moz-placeholder {
color: #777;
}
.form-control:-ms-input-placeholder {
color: #777;
}
#contact .contact-item {
margin: 20px 0;
}
#contact .contact-item span {
color: rgba(255,255,255,1);
margin-bottom: 10px;
display: block;
}
#contact .contact-item i.fa {
margin-right: 10px;
}
#contact .social {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 50px;
margin-top: 50px;
text-align: center;
}
#contact .social ul li {
display: inline-block;
margin: 0 20px;
}
#contact .social i.fa {
font-size: 22px;
width: 48px;
height: 48px;
padding: 12px 0;
border: 2px solid #fff;
color: #fff;
border-radius: 50%;
transition: all 0.3s;
}
#contact .social i.fa:hover {
color: #608dfd;
background: #fff;
}
/* Footer Section*/
#footer {
background: #ff4e4e;
padding: 30px 0;
}
#footer p {
color: #fff;
font-size: 14px;
}
#footer a {
color: #d3d3d3;
}
#footer a:hover {
border-bottom: 2px solid #608dfd;
}
#media (max-width: 768px) {
#about img {
margin: 50px 0;
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-bottom: 2vh;
color: #ffffff;
text-transform: uppercase;
}
}
#media (max-width: 960px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
color: #ffffff;
margin-top: -1vh;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
#media (max-width: 1200px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin-top: 1vh;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
Btw, app.js is inside the src folder and the style.css is inside the public folder.
Thank you in advance for any help.
I'm trying to get photos using instafeedjs
It works with some hashtags, like "starbucks", but doesn't show any result for special hashtag "starbuckssurpriseme".
There are 97 photos under "#starbuckssurpriseme" that can be viewed in Instagram app.
Here is the sample code:
var feed = new Instafeed({
get: 'tagged',
tagName: 'starbucks',
clientId: '86e61cc3046a4034aaeb317494aea040'
});
feed.run();
#instafeed a {
padding: 5px 5px 1px 5px;
margin: 10px;
border: 1px solid #e1e1e1;
display: inline-block;
border-radius: 4px;
position: relative;
}
#instafeed .likes {
background: rgba(222, 89, 135, 0.8);
font-family: sans-serif;
font-size: 1em;
position: absolute;
color: #ffffff;
right: 5px;
top: 5px;
left: 5px;
opacity: 0;
text-align: center;
line-height: 150px;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
}
#instafeed a:hover .likes {
opacity: 1;
}
<script src="http://f.cl.ly/items/3o2z3b1R3G250G1t0w2L/instafeed.min.js"></script>
<div id="instafeed"></div>
hello
Do you know what can cause empty response from Instagram API?
The problem is that all 97 photos on #starbuckssurpriseme are from a private profile.
You can see these photos because your clientId probably follows the private profile. With my Instagram i can see the counter at 97, but i can't see any photo.
This means that your clientId should be following the private profile.
I'm having an issue with my horizontal menu. The menu is not displaying inline in IE9. It displays fine in Firefox, Safari and Chrome. Unfortunately I'm working on a Mac and don't have access to IE to test it. Do you have any ideas why it's not working correctly?
Here's my CSS:
.navigationwide {
background-image: url('images/site_gray_bg.png');
border-top: 3px solid #efa320;
-moz-box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.navigation {
margin: auto;
width: 960px;
text-align: center;
}
.menu {
margin: 0;
padding: 0;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.menu li {
display: inline-block;
padding: 0;
}
.menu li a {
display: block;
font-family: 'Medula One', cursive;
font-size: 30px;
color: #ffffff;
margin: 0;
padding: 15px 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.menu li a:hover {
color: #efa320;
}
/* ----------------- SUBMENU START ----------------- */
.menu li ul {
background-image: url('images/site_gray_bg.png');
display: none;
height: auto;
padding: 0;
margin: 0;
position: absolute;
z-index: 200;
}
.menu li:hover ul {
display: block;
}
.menu li li {
background: none;
display: block;
float: none;
margin: 0;
padding: 0;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
font-family: 'Medula One', cursive;
font-size: 24px;
color: #ffffff !important;
margin: 0;
padding: 10px 25px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.menu li ul a:hover {
color: #ffffff;
background-color: #efa320;
}
I googled and found the following link which might help with your inline question horizontal menu http://openegg.ca/creating-a-horizontal-menu/
I am having a problem with my css accordion menu...
I have creater a nice slider as shown here:
http://jsfiddle.net/LedZep257/hDzyH/1/
but the lis aren't spaced nicely meaning that some items are not appearing fully.
When I use inline-block, the spacing is right but it mucks up the entire slider:
http://jsfiddle.net/LedZep257/hDzyH/
Can anyone help/does anyone have any ideas how to fix this?
I think that you can not set a transition in diferent measures, and I think that "auto" an "%" are diferent measure, you can use only one measure to set the transition, if you are having too much troubles and you really need to get that done why dont you use another measure like "em" meaby that would fix it.
e.g.
.horizontalaccordion>ul>li
{
display: inline-block;
overflow: hidden;
float: left;
margin: 0;
padding: 0;
list-style: none;
width: 8em; /*I was here*/
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
transition: width 0.6s ease-in-out;
-moz-transition: width 0.6s ease-in-out;
-webkit-transition: width 0.6s ease-in-out;
-o-transition: width 0.6s ease-in-out;
}
.horizontalaccordion>ul>li>h3
{
display: inline-block;
float: left;
margin: 0;
padding: 10px;
padding-left:19px;
padding-right:18px;
height: 19px;
width: 8em; /*I was here*/
border-left: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
white-space: nowrap;
filter: progid;
-ms-filter: progid;
}
.horizontalaccordion>ul>li:hover
{
overflow: hidden;
width: 60em; /*I was here, I just set 60em for example*/
}
.horizontalaccordion:hover li
{
width: 0em; /*I was here*/
}