1 reply · opened Feb 24, 2018
I love the ability of customizing pages with almost a cut and paste method, but once again have run into a rather frustrating issue. I would like the slideout menu in: demo-photography.html added to the template I have started working on: demo-interior-design.html. In addition to the code, what files do I need to transfer with the code for it to work or are the styles too different to do this? Thanks in advance.
Demo Menu I'm interested is attached.
Hello,
Since these are Niche Demos, there are some CSS Codes and features that are not common between each other. To use the Slide Out Menu in the Photography Template, simply copy and use the following code related to the Header from the demos/photography/photography.css File:
@media (min-width: 992px) {
.co-name img {
position: absolute;
top: 0;
left: 40px;
width: auto;
height: 100px;
z-index: 2;
}
.side-header #header {
width: 600px;
overflow: auto;
background-color: rgba(255, 255, 255, 0.9);
display: table;
}
.side-header #header.dark {
background-color: rgba(200, 94, 81, 0.95);
border-left: 0;
}
.side-header #header.dark #header-trigger i { color: #222; }
.side-header #header-wrap {
width: 100%;
padding-left: 80px;
padding-right: 80px;
height: auto;
margin: 0 auto;
position: relative;
display: table-cell;
vertical-align: middle
}
.side-header #header-wrap .container { width: auto; }
.side-header.side-header-right.open-header #header {
left: auto;
right: -600px;
}
.side-header .header-title,
.side-header #primary-menu ul li a {
font-size: 52px;
padding: 18px 0;
height: auto;
text-transform: none;
letter-spacing: -2px;
-moz-transform: translate3d(200px, 0, 0);
-webkit-transform: translate3d(200px, 0, 0);
transform: translate3d(200px, 0, 0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
will-change: transform;
-moz-transition: all 250ms ease-in 0s;
-o-transition: all 250ms ease-in 0s;
-webkit-transition: all 250ms ease-in;
-webkit-transition-delay: 0s;
transition: all 250ms ease-in 0s;
}
.dark #header-wrap:not(.not-dark) #primary-menu > ul > li:hover > a { color: #FFF; }
.side-header .header-title {
opacity: 0;
padding: 0;
margin-bottom: 25px;
font-size: 10px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 4px;
}
.side-header.side-header-open .header-title,
.side-header.side-header-open #primary-menu ul li a {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: all 500ms ease-out 0.3s;
-o-transition: all 500ms ease-out 0.3s;
-webkit-transition: all 500ms ease-out;
-webkit-transition-delay: 0.3s;
transition: all 500ms ease-out 0.3s;
}
.side-header.side-header-open .header-title,
.side-header.side-header-open #primary-menu ul li:nth-child(1) a {
-moz-transition-delay: 0.0s;
-o-transition-delay: 0.0s;
-webkit-transition-delay: 0.0s;
transition-delay: 0.0s;
}
.side-header.side-header-open #primary-menu ul li:nth-child(2) a {
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.side-header.side-header-open #primary-menu ul li:nth-child(3) a {
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.side-header.side-header-open #primary-menu ul li:nth-child(4) a {
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.side-header.side-header-open #primary-menu ul li:nth-child(5) a {
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.side-header #logo:not(.nobottomborder):after,
.side-header #primary-menu:not(.nobottomborder):after { content: none; }
.side-header.side-header-right.open-header.side-header-open #header-trigger { z-index: 200; }
.side-header.side-header-right.open-header #header-trigger {
right: 0;
top: 0;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 0;
text-align: center;
}
.side-header.side-header-right.open-header #header-trigger i { margin-left: 3px; }
.side-header.side-header-right.open-header.side-header-open #header-trigger { right: 0; }
}This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard