When Website Elements Push Each Other Around

When Website Elements Push Each Other Around

There is only so much room in that circle … and there is only so much room on your website … and there is only so much room in your banner. Often, a website owner will request a design change that presents a space challenge. The creativity it takes to fulfill that request can make web development a very fun and satisfying job.

A Case Study

To illustrate the work that it takes to reconsider adding a new element into a tight space, we will look at a currently common design feature: a short banner that extends across the top of the page to hold mission critical elements, such as a logo and navigation.

Also for this example, we will use the Kahuna theme. This theme has a moderate amount of code complexity. The Kahuna dashboard also has many areas that are very confusing to use.

Why the Narrow Banner?

The narrow top of the page banner is especially helpful to viewers in a site that has a very large image or slider at the top of the page.

While  image size and placement can be an effective communication tool, they can also be a barrier to navigation. The small banner above the image serves the need of viewers who just want to navigate to what they want.

Adding Yet Another Element to the Narrow Banner

For the narrow banner to be effective, it has to be … narrow. That means it has a limit to what elements can be shoehorned into it. It’s important to think of this space as a “mission critical only space”.

1. Limited navigation
2. Site name / logo
3. Phone number

But, even with #1 and #2, there is a struggle. It takes some work to organize the navigation so that it’s not too wide to allow room for the logo.

Example 1:

Example 2:

Example 3:

Analyzing Example 1

The banner in the first example has the Site Title and Motto that have some CSS customizations. They fit into the space just fine. But, will that space accommodate a logo as well?

The Kahuna theme seems to allow for text and a logo in the WordPress Customizer, but when you add a logo to Example 1, the logo doesn’t show.When you check the code, it’s not in the code either. In the process of adding the Logo, the Kahuna theme tried to force a crop to a squarish size.

The second banner has just a logo, which fills the whole space. The third banner is using the space correctly. The logo is essentially a small square, and the text resizes to fit. But, the text is starting to encroach on the navigation area.

Even with just a logo, if the logo is very vertical or even a basic square, it would have to be very, very small to fit in a banner area designed for a row of text.

In many uses, a very horizontal logo can be problematic. One example is if your organization is an event sponsor, and your logo will be featured on the event website.

Often, the room for such logos does not accommodate logos that are very vertical or very horizontal.

Text and Logo

The Kahuna theme choice of logo or text forces a choice between branding and SEO. Without a logo, the main branding element is missing. Without the text, you are missing some potential SEO that is inherent in text. So, why can’t you have both? Again, it’s a matter of space, and with Kahuna, it’s partly a matter of code because Kahuna doesn’t offer a way to add both through the dashboard.

First is the consideration of whether the text should be to the right of the logo or underneath the logo. If the text is to the right of the logo, it will push into the navigation area. So, we will try to put it underneath the logo. That means that we have to make the banner area somewhat taller. Kahuna provides a tool to do that in Appearance -> Customize -> Header.

Finding the Code

To add code that will allow both the logo and the site title to be included in the header, you have to figure out which file controls the placement of elements in the banner. To find that file, you have to follow the path of the functions. The starting place is header.php.

The variables and function calls in header.php for the Kahuna theme are well named, so it’s easy to see that there is a function call to chase down. A search on the files in the Kahuna theme will show which file has the cryout_branding_hook() function.

A search shows that the file is in the includes folder and in both the core.php and the hooks.php files. Normally the code in “functions” are set. But, the WordPress core was designed with the possibility to change that functionality from the functions.php file. That flexibility is triggered with the add_action() function.

Some theme companies start with a base set of code, their own core, and then use that same add_action() to change it in their various themes. That makes their development of individual themes more efficient.  There is a line of code in core.php that illustrates tapping into this flexibility. “add_action ( ‘cryout_branding_hook’, ‘kahuna_title_and_description’ );”. In this case, there is a base function from the Cryout company called cryout_branding_hook(), and for the Kahuna theme, they are adding Kahuna_title_and_description.

But, what we want is one line of code under the logo. If we add a logo in the dashboard, we want the title to appear also, in this scenario.