Lay Theme Forum

Kirin

Hi Armin,

here it is: https://t-a-a-a.net/?cmp_bypass=34

Let me know if something too confusing.

Thanks!

@arminunruh

Kirin

Hello,

I have created a button to show and hide the menu. There is one button for desktop view and one for mobile view.

In the desktop view, I want the menu to be initially hidden when you visit the page and only appear when you use the button.
This works here.

On mouseover and click on the button the menu should switch between visible and invisible.

On mouseover it works perfectly. However, the menu can only be hidden by clicking on the button, but never shown.

Also, the menu is supposed to disappear when you click in an area outside the button or the menu. This works fine for the desktop version.

Here is the code for it:

Custom CSS for Desktop:

nav { visibility:hidden !important;}

nav.navon{  
    visibility:visible !important;  
}

nav.navoff{
    visibility:hidden !important;
}

Custom HTML at top:

<button name="jim" class="desktopbutton">—</button>	<div id="intro-region"></div>


jQuery(document).on("mouseover", ".desktopbutton", function() {
     jQuery("nav").toggleClass("navon");
    jQuery("nav").toggleClass("navoff");	 	 
});


jQuery(document).on("click", ".desktopbutton", function() {
         jQuery("nav").toggleClass("navon");
    jQuery("nav").toggleClass("navoff");
});
</script>

For the mobile version, I also want the menu to be initially hidden when you visit the page and only appear when you use the button.
That doesn't work here. If I insert

nav { visibility:hidden !important;}

in Custom CSS for Mobile, the menu never appears, the button is then completely functionless.

If I leave out this code, at least the button works. But the menu is not hidden initially as intended when the site is visited.

In addition, the menu should also disappear in the mobile version if you click or "touch" in an area outside the button or the menu. This does not work here, unlike on the desktop.

Here is the code for the mobile version:

 <script>

<button name="mobilejim" class="mobilebutton">—</button>	<div id="intro-region"></div>

jQuery(document).on("click", ".mobilebutton", function() {
         jQuery("nav").toggleClass("navon");
    jQuery("nav").toggleClass("navoff");
});


jQuery(document).on("click touchstart", "html", function(event) {
    jQuery("nav").removeClass("navon");
    jQuery("nav").addClass("navoff");

 </script>

To detect the "touch" I also found this more complex solution online - but it it doesn't detect any touches in my case either:

 <script>
jQuery(document).on('touchstart',"html", function() {
    documentClick = true;
    return false;
});
jQuery(document).on('touchmove',"html", function() {
    documentClick = false;
});
jQuery(document).on('click touchend',"html", function(event) {
    if (event.type == "click") documentClick = true;
    if (documentClick){
    
    jQuery("nav").removeClass("navon");
    }
 });
 </script>

Originally this snippet came without the "html", which I inserted after the first fail, since it worked with "html" in the Desktop version. But still no luck here.

CSS is the same as for the Desktop version

I've spent a couple of days trying it out now and I'm really stuck. I would be very grateful for your help.

My Best,
Kirin

Kirin

Dear @Richard

Thank you for the links!

I have now put together the following from this:

Custom CSS for Desktop Version:

nav.navoffstart {
    opacity: 0 !important;
   visibility:hidden !important; 
}

.navoff{
    visibility:hidden !important;
    opacity: 0 !important;
    transition: all 600ms ease !important;
    -webkit-transition: all 600ms ease !important;
}

.navon{
    visibility:visible !important;
    opacity: 1 !important;
    transition: all 600ms ease !important;
    -webkit-transition: all 600ms ease !important;
}

Custom <head> content

<script>

window.laytheme.on("newpageshown", function(){
  
    jQuery('nav').addClass("navoffstart");

});

</script>

Custom HTML at top

<script>

window.laytheme.on("newpageshown", function(){
    jQuery("button").click(function(){
    jQuery('nav').removeClass("navoffstart");
    jQuery('nav').toggleClass("navon navoff");
    });
  });

</script>

<button>B</button>

Alternatively, I also tried

<script>

jQuery(document).on("click", "button", function(event) {
    jQuery('nav').removeClass("navoffstart");
	 jQuery("nav").toggleClass("navon navoff");
});

</script>

<button>B</button>

What I am trying to achieve is:

Hide the menu on page load.

Fade in the menu when the button is clicked.
Fade out the menu again when the button is clicked again.
I.e. switch between the states smoothly.

Therefore I used toggleClass with two classes.

However, the menu is only shown once when the button is clicked, but it is not hidden again when the button is clicked again.

ToggleClass with only one class works, but not with two classes.

Also, the menu appears for a blink of an eye on page load before it becomes invisible. To solve this problem, I tried to make the menu invisible right at the beginning, with

nav.primary {
visibility:hidden;
}

But then, unfortunately, it never appears again. My button then doesn't work at all.

I feel like I'm pretty close to the solution, but unfortunately I'm stuck here.
Have I misunderstood something?
Or does Laytheme maybe have a problem with toggleClass("one two"), two classes to switch between?
Is there any workaround maybe?

I would be very grateful for your help.

Have a nice weekend!
Kirin

Kirin

Hello there,

Has anyone found a solution for this in the meantime?
The thread creator has not integrated it on his site, at least.

Is there perhaps a plugin that offers something like this?

It's somehow similar to a responsive view on the desktop, but also the archived threads here that deal with this don't come to a solution like the one shown above.

Would be very happy about a hint!

Best,
Kirin

Kirin

Hi Richard,

Thanks for the test run! Did the related posts not show up although you selected categories or tags for the posts?

Isn't taxonomy - selecting categories and tags for posts in the default wordpress post editor just a standard feature? Does Lay Theme hide these checkboxes or delete the tags and categories after you save the post? Or does it not work with posts at all?

Actually, I don't want to go into too much detail and of course I don't want to criticize Lay Theme, since it seems to work for a lot of people - I just want to make sure we're talking about the same thing.

My Best,
Kirin

Kirin

Dear Richard,

Thank you again for your response.

Meanwhile, I've learned that what I'm looking for is called "related posts".

And it looks like Jetpack does support "related posts".
https://jetpack.com/support/related-posts/

But now I read here in the forum that it is recommended in some cases to disable Jetpack because it can cause problems with Lay Theme. Can someone confirm me that it would work with Jetpack?

Even better, since sleeker/faster, would be this plugin: https://wordpress.org/plugins/related-posts-by-taxonomy/

Is it possible to find out if this plugin works with Lay Theme without having to buy the theme in advance?

Thanks,
Kirin

Kirin

Dear @Richard

Thank you for your help!

However, the website would mainly consist of a large/growing portfolio. And it seems to me as if I would have to handcode every single footer then - excluding the thumbnail of the page currently shown, and I would also have to update every already existing page to include the new thumbnail linking to the new page. Or is there a way to automate this?

Or does anyone know of plugin that works with Lay Theme to solve this?

Again, have a nice weekend!
Kirin

Kirin

Thanks for the hint. But wouldn't this footer just show thumbnails for every project INCLUDING the one that ist currently shown in full? How would I exclude this one to make sure that there isn't a thumbnail in page's footer that links to the page itself?

Kirin

Hello,

Is it possible to have an overview/gallery of thumbnails or bigger pictures (and maybe even a few words) - one picture for each project (minus that of the one that is currently shown in full) at the end of every project page of a portfolio site?
Somehow like this theme does it: https://themes.elmastudio.de/onigiri/portfolio/must-love-books/
The gallery should not show up at other sites like CV etc.

If so, lay theme would be perfect for me.

Have a nice weekend everyone!
K

Lay Theme Forum

Kirin

Posts