Lay Theme Forum

paulstolle

Could you please help me with some advice, @arminunruh?

paulstolle

Thanks for your answer, @arminunruh!

It is important to see the submenu items only on specific sites and not all the time:

Therefore, I added those menus directly on the specific site via edit HTML.

Could you find any other solution to solve the origin problem?
I just have no idea why this difference between chrome and safari is coming …

Thanks a lot for your support!

paulstolle

Hi there,

I added some parts of my menu structure directly on the page via edit HTML.

Those parts work perfectly on chrome, but are not visible on safari.

The menu items and fixed background bar are not visible.

Could you please help?

Thanks a lot, Paul

———

Here is the URL: https://onzgi.com/artwork/

Here is the code I added on the page via edit HTML:

<!DOCTYPE html>
<div class="submenu artwork_menu">
    <ul>
        <li><a href="https://onzgi.com/artwork/" class="_Submenu"><span class="active_submenu_link">All</span></a></li>
        <!--
        <li><a href="https://onzgi.com/installation/" class="_Submenu"><span>Installation</span></a></li>
        -->
        <li><a href="https://onzgi.com/sculpture/" class="_Submenu"><span>Sculpture</span></a></li>
        <li><a href="https://onzgi.com/graphical/" class="_Submenu"><span>Graphical</span></a></li>
    </ul>
    <div class="menubar"></div>
</div>

Here is the code I added on custom CSS & HTML:

/*MENUBAR*/
.menubar {
    position:fixed;
    top:0;
    left:0;
    height: 13vw;
    width: 100%;
    background-color: white;
    z-index: -1;
    overflow:visible !important;
}

/*SUBMENU GENERAL*/
.submenu {
    position: fixed;
    top: 0;
    right: 0;
    margin-top: 8vw;
    z-index: 20;
}

Here is the screenshot (chrome vs. safari):

paulstolle

Dear @Richard,

thanks a lot for your answer. I already found those setting deep in the javascript file behind LayTheme. Thought I could adjust things with CSS only but couldn't find any solution … Maybe somebody else could help?

All the best,
Paul

paulstolle

Hi there,

thanks for fixing the anchorscroll issues in general with the latest updates. Now it's working on desktop and mobile. Awesome!

I'd like to ask if there is any possibility to adjust the settings at Lay Options > Anchorscroll Space Top … from px to % ? Right now my whole website is using %-values and so the anchor position between desktop and tablet is changing a lot. Is there a way to set up things?

Would be great to hear from you guys!

All the best and keep on going,
Paul

paulstolle

Hi @Richard-K

This z-index is driving me crazy … BUT, I finally found a way to solve my problem:

I built a link area with HTML on the bottom of each site. The menubar has to be nested inside of the div container, otherwise it would overlay everything else.

<div class="submenu site_menu">
    <ul>
        <li><a href="https://onzgi.com/exhibition/" class="_Submenu"><span>All</span></a></li>
    </ul>
    <div class="menubar"></div>
</div>

The main problem was the stacking context of my site. Therefore the z-index was not working as I aspected.

Maybe it's not the sexiest solution but it's definitely working well. Cheers.

All the best
Paul

paulstolle

Thanks a lot, @Richard-K.

The only problem is that I need the white navbar. There will be more projects in future so while scrolling the fixed menu should be on top of a white background. How can I deal with that? Should I build a div block with white background and z-index to simulate the navbar and lay it between menu items and content?

I'm just wondering if thumbnail grid and grid filter are stack on the same layer so that I can't put the filter above the navbar … Do you know why the simple z-index is not working?

Would be happy to hear from you!

All the best,
Paul

paulstolle

Hi @Richard-K ,

thanks for this helpful line of code. I had the same issue but am still not able to fix the category filter above my menu. I added the

 z-index: 100 !important;

and but the filter is still behind the menu bar.

Could you please help me?

Thanks a lot,
Paul

paulstolle

Hi there,

I'm using the new thumbnail grid filter on my project site above my thumbnail grid (basic setup). Unfortunately the filters disappear when I'm in mobile mode.
I just found that the font size is 0.

.lay-thumbnailgrid-filter-anchor.row {font-size: 0px;}

Is this a bug or did I missed some basic setup?

Would be great to get some help!

All the best,
Paul

paulstolle

Dear @Richard-K

Yeah, it's working in general. I can also adjust things in Text Formats but there is no preview of the actual font in there.

However, now I got the .woff2 files and everything is fine. But maybe this topic will help somebody else?

Thanks a lot for your support and all the best!

paulstolle

Thanks a lot @Richard-K!

So I placed my font right into Lay Options -> Custom CSS & HTML -> Custom <head> content like this:

<style> 

@font-face {
    font-family: 'Wasa-r';
    src:url(data:font/truetype;charset=utf-8;base64,T1RUTwA…
    format('truetype');
    font-weight: normal;
    font-style: normal;
}

</style>

Under Custom CSS I placed this line of code:

div, span, p, a, h1, h2, h3, h4, h5, h6, h7 { font-family: Wasa-r !important;}

(Without !important it's not changing all properties on my site.)

Right now it's working but I've found no way to change the font-style in Text Formats visibly (all changes there are working but without preview).

Is this way bulletproof or did I missed a point? Should I install the font via <script> tag and CSS under Lay Options -> Webfonts to make it more resistant?

Would be happy about further help from you!

Thanks a lot,
Paul

paulstolle

Thanks a lot @Richard-K!

paulstolle

Hi there,

I just bought a font which is already encoded in Base64 to add on any website.

The foundry provided me a font.css like this:

@font-face {
  font-family:'FONT_NAME';
  src: url(data:application/font-ttf;charset=utf-8;base64,BASE64_STRING) format('truetype');    
  font-weight: normal;
  font-style: normal;
}

How should I handle this the best way?

Thanks a lot!
Paul

paulstolle

Hi there,

I'd like to change my background image from page to page (different background-images for different pages). How can I handle this? I just found no workaround …

Thanks in advance,

Paul

paulstolle

Oh, I see … Thanks, @mariusjopen !

paulstolle

Thanks for your help, @mariusjopen !

I changed the three IDs to projects, services and contact and the site name to home.

The menu links are set in Wordpress > Design > Menus as individual links like this:
https://paulstolle.com/home#projects
https://paulstolle.com/home#services
https://paulstolle.com/home#contact

Can you work with this?

Best, Paul

paulstolle

Thanks for your quick response, @mariusjopen !

I set the ID leistungen to the horizontal line above Leistungen. But even if I set the ID in a div in the text-editing-window it is not working and just jumping to the bottom of the page.
The anchor links are also restraining the link to the main page if you click on Paul Alexander Stolle after clicking another menu-link.

Any ideas why this is happening?

Best, Paul

paulstolle

Hi there,

I added three anchor links to my main menu like https://paulstolle.com/start#projekte
The first link is working smooth but the other two links are just jumping to the bottom of the page without a smooth transition.

I tried different workarounds and ended up with the following code in my Custom <head> content :

<script>
    window.laytheme.on('newpageshown', function(){
       if(window.location.hash.length > 0){
           var id = window.location.hash;
           if(jQuery(id).length > 0){
                jQuery('html, body').animate(
                { scrollTop: jQuery(id).offset().top },
                { duration: 1200 });
           }
       } 
    });
</script>

Is there a solution that all links are directing to the locations where I set my id's?

Thanks in advance!

Paul

Lay Theme Forum

paulstolle

Posts