Make sure to add <script></script> in between your custom <head> content. The correct way to place this would be:
<! –– OVERLAY MENU ––>
<script>
function openNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
</script>
<! –– OVERLAY MENU ––>
Hi @amcd125 - I achieved this using the following code here:
You would have to add the code into the custom css + html sections of lay theme settings:
UNDER CUSTOM HTML:
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="/myfirstlink">link 1</a>
<a href="/mysecondlink">link 2</a>
<a href="/mythirdlink">link 3</a>
<a href="/myfourthlink">link 4</a>
</div>
</div>
<span class="layovermenu" style="font-size:30px;cursor:pointer" onclick="openNav()">MENU</span>
Under CUSTOM <HEAD> CONTENT :
/* Open */
function openNav() {
document.getElementById("myNav").style.display = "block";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
UNDER CUSTOM CSS:
/* overlay menu */
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 4;
top: 0;
left: 0;
background-color: rgb(255,255,255);
background-color: rgba(0,0,0);
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
font-family: Futura Pro Bold;
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #ffffff;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.layovermenu {
font-family: Futura Pro Bold;
position:fixed;
width: 100%;
text-align: center;
z-index: 3;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
I added the class 'layovermenu' in order to change the font and better position the menu link.
This works great on the desktop version but on mobile the overlay does not show - any tips? @mariusjopen
Thank you!
@edgrbnz said in Images appear on link hover:
.hoverFolio {
/basic styling for your text object/
margin: auto !important;
}.hoverFolio-links {
/that’s the wrapper for the links which also defines the image height in relation to your text block/
position: relative;
z-index: 1;
padding: 5vw 0;
}.hoverFolio .hoverFolio-images img.hoverFolio-image {
/that’s your image positioning/
position: absolute;
object-fit: contain;
width: auto;
height: 100%;
top: 0;
left: 50%;
bottom: 0;
transform: translateX(-50%);
display: none;
}
This did not work for me even after changing $ to jQuery - anyone else having trouble setting this up?
@mariusjopen said in Mobile settings for margins not registering:
.laynav.mobile-nav {
margin-top: 20px;
}
Thank you! - this works at placing the menu at a fixed position on mobile. However when the phone is switched to landscape format the menu then overlaps with the sitetitle, any way to work around this?
Also any way I can center the #grid across all pages - the page content div on mobile is not centered/fixed and so it floats to overlapp with navigation at the top of the page.
Thanks again!
Update -
Adding newpage /newpagesshown breaks the code. Any way I can load the slideshow only once + preload the images? Also change the sitetitle link to a page different than the front page without necessarily changing the front page?
window.laytheme.on("newpage", function () {
checkRatio();
jQuery( '.slideshow' ).fadeIn( 1500 );
jQuery( "#slideshow" ).find( "img" ).eq( 0 ).animate({
"opacity" : 1
}, function() {
setInterval( 'slideshow()', 3000 );
});
jQuery( '#title' ).fadeIn( 1500 );
});
$( window ).resize ( function() {
checkRatio();
});
jQuery( 'html' ).click( function() {
window.location.href = "/info";
});
var timedelay = 1;
function delayCheck() {
if( timedelay == 15 ){
$( '#title' ).fadeOut( 1500 );
timedelay = 1;
}
timedelay = timedelay+1;
}
jQuery( document ).mousemove( function() {
jQuery( '#title' ).clearQueue().fadeIn();
timedelay = 1;
clearInterval( _delay );
_delay = setInterval( delayCheck, 500 );
});
// page loads starts delay timer
if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
_delay = setInterval( delayCheck, 500 );
}
var curr = 0;
function slideshow() {
last_pos = curr;
curr++;
if ( jQuery( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
//do nothing
} else {
curr = 0; //return to first image
}
jQuery( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
"opacity" : 0
});
jQuery( "#slideshow" ).find( "img" ).eq( curr ).animate({
"opacity" : 1
});
}
function checkRatio() {
jQuery( "#slideshow" ).find( "img" ).each( function() {
height_ratio = .8;
image_width = parseInt( jQuery( this ).attr( "width" ) );
image_height = parseInt( jQuery( this ).attr( "height" ) );
window_height = jQuery( window ).height();
new_image_height = window_height * height_ratio;
ratio = new_image_height / image_height;
new_width = image_width * ratio;
if ( new_width > ( jQuery( window ).width() * .9 ) ) {
jQuery( this ).addClass( "landscape" );
} else {
jQuery( this ).removeClass( "landscape" );
}
});
}
</script>
OR
window.laytheme.on("newpageshown", function () {
checkRatio();
jQuery( '.slideshow' ).fadeIn( 1500 );
jQuery( "#slideshow" ).find( "img" ).eq( 0 ).animate({
"opacity" : 1
}, function() {
setInterval( 'slideshow()', 3000 );
});
jQuery( '#title' ).fadeIn( 1500 );
});
$( window ).resize ( function() {
checkRatio();
});
jQuery( 'html' ).click( function() {
window.location.href = "/info";
});
var timedelay = 1;
function delayCheck() {
if( timedelay == 15 ){
$( '#title' ).fadeOut( 1500 );
timedelay = 1;
}
timedelay = timedelay+1;
}
jQuery( document ).mousemove( function() {
jQuery( '#title' ).clearQueue().fadeIn();
timedelay = 1;
clearInterval( _delay );
_delay = setInterval( delayCheck, 500 );
});
// page loads starts delay timer
if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
_delay = setInterval( delayCheck, 500 );
}
var curr = 0;
function slideshow() {
last_pos = curr;
curr++;
if ( jQuery( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
//do nothing
} else {
curr = 0; //return to first image
}
jQuery( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
"opacity" : 0
});
jQuery( "#slideshow" ).find( "img" ).eq( curr ).animate({
"opacity" : 1
});
}
function checkRatio() {
jQuery( "#slideshow" ).find( "img" ).each( function() {
height_ratio = .8;
image_width = parseInt( jQuery( this ).attr( "width" ) );
image_height = parseInt( jQuery( this ).attr( "height" ) );
window_height = jQuery( window ).height();
new_image_height = window_height * height_ratio;
ratio = new_image_height / image_height;
new_width = image_width * ratio;
if ( new_width > ( jQuery( window ).width() * .9 ) ) {
jQuery( this ).addClass( "landscape" );
} else {
jQuery( this ).removeClass( "landscape" );
}
});
}
</script>
You may see it here - agentandartist.co
Actually - I just realized that navigating to any other page sends you back to the info page - as if the on-click event of loading the info page keeps repeating itself even after you navigate elsewhere.
Hi Marius! - I sort of got this to work:
I created a page which would serve as an intro and went ahead and added the pertaining html + jquery. I can confirm it is running on the page however I have 2 problems:
1- The slideshow will not load/play on initial page load - the only way I know it is working is when I click on the site title (which appears on mousehover) it directs me to the info page (this is the correct action/response), then when I click the back button on my browser, only then does the slideshow actually begin to play as it’s supposed to -
2- which then brings me to problem number 2 // I then must wait till all the images are loaded for it to begin playing.
The site-title is linked to this page as it is set as the front page - after clicking on the slideshow and arriving on the info page, if the user clicks on the site title again, the slideshow does this weird thing where it tries to reload halfway but then goes back to the info content - is there any way to load the slideshow on the first page load but then change the site-title (/) link thereafter so that this doesn’t happen?
I read somewhere that lay theme is single page and so I must use newpage /newpageshown…
The site title is completely centered - any way to completely center the images across different media as well?
Thank you!
Thanks - The site is back up now, I'm still having trouble with the menu on mobile. None of my position settings seems to be registering and the menu links are fixed to the top of the page above the site title.
Example - the /artists page:
There is a link here which I would like centered across different media sizes -
In the gridder
<p class="_Default" style="text-align: center;"><a class="artist-link" href="/linkname"><span style="color: #000000;">LINK NAME</span></a></p>
Cudtom CSS
.artist-link:link {
width: 60%;
left: 20%;
position: absolute;
text-align: center;
top: 0;
}
Thanks! — agentandartist.co
I have also tried to center text in the /artists page to no success. I gave the link a class and tried to apply custom css - after inspecting it with developer tools I verified the browser was able to register this however there were no changes in position.
Is there a way to override this with !important!?
Hello - I am trying to customize margins for mobile browser. However none of my settings are registering - for example editing the Main Menu Top Frame % to 20% in the customizer returns no results - the menu floats to the top of the page as if margin top was set to 0. The only wait it moves further down the page is if the menu bar is revealed.
Furthermore - editing the mobile browser margins for pages + categories does not return any results either. I've edited the gridder defaults for both desktop + mobile versions + edited each page's mobile version margins to no result.
Is anyone else having this issue with mobile settings not registering?
Thanks!
Hello —
I'm wondering if it is possible to implement the ACF plugin into LayTheme.
Also - is it possible to create custom page templates for individual pages? Currently you cannot assign a template to a page.
Thank you!
Hi —
Unfortunately, Hovers aren't possible on mobile devices as there is no persistent cursor - memory of the last touched point by default.
Hi — This can also happen with large image files. Try processing the image with a photo editor like Photoshop and re-uploading.
I would actually create the folder outside of wordpress as to prevent any changes to the theme.
When you log into the ftp you should see something similar to the image below - 
The folder highlighted 'public_html' is where you would like to create your pdf folder - I would then create a folder for each individual artist and upload the pdfs there.
Once you have done that the next step would be to decide where exactly you would like to place these links on your page - then move on to creating the links.
A basic link in html is done in the following way - using the html editor in LayTheme type the following:
<a href="https://thenameofyourwebsite.com/pdf/artist name/the exact name of the pdf file.pdf">Here you type what you would like to appear as the actual link title</a>
In essence you are creating a link to the pdf files which you've previously uploaded.
Hi - A way to do this would be to create a folder within your theme files or the public html folder - perhaps using ftp and uploading the pdf file for each artist in a sub folder. You would then only have to create a link on the artist portfolio site and 'link' this to the file. Hope this helps.
Hello -
I would like to have a custom intro/landing/ front page as seen here:
http://bartoszludwinski.com/
I have put the page together using js however without the use of a cms - the images are called from a directory.
I would like to know how to add custom js to a particular lay theme page - then make this page the intro. I believe I can save the images somewhere in the theme file and then call them manually?
Below is my js / html
HTML —
<div id="slideshow">
<img src="img/img_1.jpg" alt="image" width="600" height="800">
<img src="img/img_2.jpg" alt="image" width="600" height="800">
<img src="img/img_3.jpg" alt="image" width="600" height="800">
</div>
JS —
<script type="text/javascript">
$( window ).load( function() {
checkRatio();
$( '.slideshow' ).fadeIn( 1500 );
$( "#slideshow" ).find( "img" ).eq( 0 ).animate({
"opacity" : 1
}, function() {
setInterval( 'slideshow()', 3000 );
});
$( '#title' ).fadeIn( 1500 );
});
$( window ).resize ( function() {
checkRatio();
});
$( 'html' ).click( function() {
window.location.href = "/info";
});
var timedelay = 1;
function delayCheck() {
if( timedelay == 15 ){
$( '#title' ).fadeOut( 1500 );
timedelay = 1;
}
timedelay = timedelay+1;
}
$( document ).mousemove( function() {
$( '#title' ).clearQueue().fadeIn();
timedelay = 1;
clearInterval( _delay );
_delay = setInterval( delayCheck, 500 );
});
// page loads starts delay timer
if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
_delay = setInterval( delayCheck, 500 );
}
var curr = 0;
function slideshow() {
last_pos = curr;
curr++;
if ( $( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
//do nothing
} else {
curr = 0; //return to first image
}
$( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
"opacity" : 0
});
$( "#slideshow" ).find( "img" ).eq( curr ).animate({
"opacity" : 1
});
}
function checkRatio() {
$( "#slideshow" ).find( "img" ).each( function() {
height_ratio = .8;
image_width = parseInt( $( this ).attr( "width" ) );
image_height = parseInt( $( this ).attr( "height" ) );
window_height = $( window ).height();
new_image_height = window_height * height_ratio;
ratio = new_image_height / image_height;
new_width = image_width * ratio;
if ( new_width > ( $( window ).width() * .9 ) ) {
$( this ).addClass( "landscape" );
} else {
$( this ).removeClass( "landscape" );
}
});
}
</script>
Yes - Please. I saw an example you provided a user somewhere in the forum. I'm definitely up to the task.
Thanks!
Hello —
I would like to display the projects as a list where the project thumbnails appear on mouseover. I know this is something that has been brought up in the forums in the past.
http://laythemeforum.com:4567/topic/826/hovering-over-text-showing-thumbnail
Any tips on where to start?
Thanks!