CSS Grid #23: Building a Hamburger Icon Menu

CSS Grid #23: Building a Hamburger Icon Menu

This tutorial will explain how to code a basic hamburger icon, in order to display the main navigation with CSS Grid.

The navigation will be hidden by default at all screen sizes and it will appear when clicking the hamburger icon.

The desktop version of the code displays a horizontal menu, whereas the mobile version (< 700px) displays a vertical menu.

Read more: CSS Grid #23: Building a Hamburger Icon Menu

CSS Grid #22: Theming a Footer with CSS Grid and Media Queries

Theming a Footer with CSS Grid and Media Queries

In this tutorial, you are going to build a footer element with media queries. The main part of the footer contains 6 elements on a wide screen.

This layout works with screens larger than 960px.

The 6 elements are as follows:

  • The logo.
  • The primary navigation.
  • The secondary navigation.
  • The social media block.
  • The contact block (phone number and email address).
  • The submit form for the newsletter subscription.

Read more: CSS Grid #22: Theming a Footer with CSS Grid and Media Queries

3 Ways to Disable a Joomla Plugin

3 Ways to Disable a Joomla Plugin

Some of the most common errors we see on Joomla sites involve plugins.

A normal Joomla site will have dozens of plugins, so they are a common source of errors.

In this tutorial, I'm going to show you how to disable a troublesome plugin, using three different techniques.

The first technique is the normal way to disable a plugin. The second and third techniques can be used if the plugin has locked you out of Joomla's administrator area.

Read more: 3 Ways to Disable a Joomla Plugin

CSS Grid #21: How to Insert an Empty Row in CSS Grid

How to Insert an Empty Row in CSS Grid

As you already have learned in the previous tutorials of this series, CSS Grid (the Grid specification in your browser) positions grid items into grid cells or areas, based on an auto-placement algorithm, unless you position the items by yourself.

The browser will automatically create new rows and place items according to their source order. But what if you want to have an empty row without content? 

In this tutorial, you will learn how to generate an empty row in a grid and then use this row to overlap two grid items.

Read more: CSS Grid #21: How to Insert an Empty Row in CSS Grid

CSS Grid #20: Build a Teaser Gallery with Cards

CSS Grid #20: Build a Teaser Gallery with Cards

The card gallery is a popular design pattern on the web and you see them often in newspaper, magazine and online commerce sites, because of a number of reasons:

  • Cards can be adjusted to all screen sizes (responsiveness).
  • The information can be read and processed in an easy way.
  • Cards help the user focus on the detail.
  • Cards increase usability.

In this tutorial, you will learn how to use the CSS Grid to create a card based layout. Each card will have a teaser to a particular book. The layout will be by default responsive and without the use of media queries.

Let’s start!

Read more: CSS Grid #20: Build a Teaser Gallery with Cards

How to Create Custom Administrator Menus in Joomla

One new feature in recent version of Joomla 3 is the ability to create new admin menus.

This is a very handy feature for sites with multiple users. Instead of trying to manipulate the permissions for some users, you can simply give them a different set of menu links.

In this example, I'll show you how to make an admin menu that only shows for the Administrator user group. We also have a tutorial on creating custom administrator modules in Joomla.

Read more: How to Create Custom Administrator Menus in Joomla

Multiple Sitemaps Are Better Than One Large Sitemap

5 Important Reasons to Use Multiple XML Sitemaps

OSMap is the most popular way to create a sitemap for Joomla sites. 10,000 of Joomla users rely on OSMap to help Google and Bing understand their site's content.

Over the years of developing OSMap, we've spoken with Joomla users who have larger and larger sites. Some sites have 10,000 URLs, some have 50,000 URLs and we've even talked to users with hundreds of thousands of pages.

For these large sites, we do not recommend using a single sitemap. Neither do Google or Bing.

In this blog post, I'll explain why and how you should use multiple sitemaps for large Joomla sites. 

Read more: Multiple Sitemaps Are Better Than One Large Sitemap

CSS Grid #19: Difference Between Grid Containers and Block Containers

Until now, in this series we have assumed that grid containers behave the same as block containers. But there are some subtle differences between them.

Being aware of those, will help you improve your development workflow. This tutorial will explain the differences between the Grid containers and regular block containers.

Read more: CSS Grid #19: Difference Between Grid Containers and Block Containers

5 Joomla Tips for Power Users

5 Joomla Tips for Power Users

Joomla is a great CMS with so many features that even regular users may not understand all options available to them.

I'm going to share 5 tips that Joomla power users love to take advantage of:

  • Global check-in
  • Display site name in page titles
  • Enable HTTPS in all your pages
  • Duplicate a module
  • Preview module positions

Read more: 5 Joomla Tips for Power Users

CSS Grid #18: How to Build a Dropdown Menu

How to Build a Dropdown Menu in CSS Grid

CSS Grid allows you to build complex user interfaces with ease. User experience with a browser-based interface very often starts from a navigation element.

This tutorial will apply some of the techniques you have already learned in this series to build a drop-down menu. You will build it for a fictional online sports store. Hopefully, it will help you to strengthen your knowledge.

Read more: CSS Grid #18: How to Build a Dropdown Menu