How to make an iframe fit or fill 100% of its container’s remaining height

There are a lot of suggested solutions out there: mostly not working when I tried them, and some required several lines of code which seems unnecessary for such a simple issue.

After a lot of testing, I found one solution that worked 100%, at least for a PDF I’m trying to embed and display in full height using an iframe on a page.

It came from a short answer from Stack Overflow user sree¬†when the same problem was asked there. Continue reading How to make an iframe fit or fill 100% of its container’s remaining height

How to keep parent page navigation link highlighted when viewing a child/sub page

It’s good UX when your users know where they are on your website just by looking at the navigation menu and seeing the page label highlighted or active. Better, knowing what main page they’re on while viewing a sub page.

In WordPress, most theme defaults doesn’t highlight the parent page e.g. yourwebsite.com/parent/ when the current page is a child or sub page of it e.g. yourwebsite.com/parent/child/.

As a demo, go to my WordPress Themes page bibiano.io/wordpress/themes/ and notice how the parent page navigation link WordPress bibiano.io/wordpress/ is highlighted.

Here’s the 5-line code snippet I used to solve that issue. Continue reading How to keep parent page navigation link highlighted when viewing a child/sub page

How to keep “Blog” navigation link highlighted when viewing a single post

Here’s how you can keep that hover/active effect or highlight on the “Blog” link in your WordPress website navigation menu when the user is viewing a single blog post or a category/tag/search archive as demoed live on this very website. Continue reading How to keep “Blog” navigation link highlighted when viewing a single post