This wiki page will go over the layout for the header section in the default design. The header section is contained in the sub template file header.tpl. Below is an explanation of how the different parts work together, by understanding this you will be able to better customize the look to your own desires.

Since this uses RWD that responds to the size of the screen, in each instance it will first show the "small view", then the "large view", and any other "breakpoints" in between if there are any. This will give you an idea of what changing something will affect in the different screen sizes.

The entire header for each page is contained in the sub template header.tpl. The header uses HTML 5 <header> tags like so:

<header class="page clearfix">
	...
</header>

Note that you can have multiple <header> tags contained within the same page. For this reason, we also use CSS classes so that we can uniquely style the main "page" header, using the .page CSS class. That way you are free to use the <header> tag yourself for your own custom design without worrying about the default CSS attempting to style your own header. Note that the clearfix class is a special helper class to make sure any "floating" contents inside the <header> will not over-flow below the boundaries of the header¹⁾. The clearfix class can be used on any "container" element that has floating elements inside it.

Small View (Mobile):

The screenshot above shows the "header" as it will look in the small view, when either your browser width is small enough, or you are on a mobile device.

First Breakpoint: 50em (800px) wide and "up":

The screenshot above shows what the header looks like at the minimum width of 50em²⁾ which is the first and only media breakpoint min-width that affects the header. There are other media break-points, but this is the only one that has a direct effect on the header layout. If your browser window is at least 50em (800px) the layout will change from the small header layout displayed in the first screenshot, to the larger layout above. Note how the logo now has a background behind it, and there are menu items and links and such displayed in the larger version. In the smaller version, those menu options are "tucked away", accessed by tapping on the menu icon in the top bar.

Small View (Mobile):

First Breakpoint: 50em (800px) wide and “up”:

The same HTML markup is used for both the small and the larger view of the logo. The HTML below:

	<!-- START LOGO / BANNER TOP -->
	<div class="logo-box" title="Website Name">
		<a href="index.php" class="logo" title="Website Name">
			<!-- Logo image OR Logo text goes here!  To use text, remove the
				image tag below and replace it with text -->
			<img src="{external file='images/logo.jpg'}" alt="Website Name" title="Website Name" />
		</a>
		<a href="index.php" class="slogan" title="Website Name">
			<!-- Slogan text goes here, if you want to add a slogan that shows
				under the logo text or logo image. -->
		</a>
	</div>

The first thing you will want to change, is the title="Website Name", change all of them to match your own website name. There are 4 places to change that in the above HTML snippet. You will also want to adjust the alt="Website Name" that is part of the <img> tag for your logo.

There are different ways to display a logo, and the software has used a few different ways in the past. The current way actually inserts the logo as an image in the HTML. In the large view, it also will have a background image that works to separate the logo from the menu.

It uses the above method for a few different reasons. The first is that it is the most semantically "descriptive" in the HTML code, it is pretty obvious that this is a logo image that links to the home page. Other methods, for instance using the logo image as the background image, are not as semantic and give the search engines less to go on. By having the image tag directly in the HTML instead of using a BG image for the logo, you can set ALT and TITLE attributes on the image so that it can be one more thing for the search engines to identify for your site.

In the small view, if your logo is a larger width than the screen size, it will be resized to 100% screen width. That way users do not have to scroll just to see your full logo image. Although this is not very noticeable with the default logo being just 275px wide, if you use a larger logo you will notice this come into play.

To change the logo, upload your replacement logo image to my_templates / external / images / logo.jpg. We recommend using a logo at about the same dimensions as the starting default template for best results. You can use a different size but you may need to make adjustments to the CSS for other parts of the header.

This is not often used, but it may be a good idea! Not only will it give your visitors something to help identify and remember your site, but the slogan text is actual text, not a graphic. This helps with SEO as well, it allows search engines to pick up on your slogan text so that the text is not "locked inside" an image, that would otherwise make your slogan invisible to search engines.

To start using a slogan, just insert your text slogan into the right place, the header.tpl already has a ready-made place to do this, in the section below:

		<a href="index.php" class="slogan" title="Website Name">
			<!-- Slogan text goes here, if you want to add a slogan that shows
				under the logo text or logo image. -->
		</a>

For instance, if you wanted to use the slogan Greatest Site in the Multiverse!, it might look like this:

		<a href="index.php" class="slogan" title="Website Name">Greatest Site in the Multiverse!</a>

Note that in the sample above, we went ahead and removed the HTML comments, since it should be pretty obvious that this is your slogan. Also removing the comments results in smaller size, so faster page loading.

Be sure to Test Your Changes to make sure that the slogan displays like you want. We have set up the default styles for the slogan, such that it should look good for a variety of different slogan lengths, on multiple size screens, but it is still good to test. Also consider making your slogan short and sweet, something that is easy for your visitors to remember and something unique to your site.

You can actually use the slogan instead of the logo graphic if you want! To only use the slogan, remove this section from the header.tpl:

		<a href="index.php" class="logo" title="Website Name">
			<!-- Logo image OR Logo text goes here!  To use text, remove the
				image tag below and replace it with text -->
			<img src="{external file='images/logo.jpg'}" alt="Website Name" title="Website Name" />
		</a>

And as always, be sure to Test Your Changes to make sure everything lines up correctly with only using the slogan.

If you want to remove the slogan altogether, in order to reduce the page size a little, you can remove the entire slogan section below:

		<a href="index.php" class="slogan" title="Website Name">
			<!-- Slogan text goes here, if you want to add a slogan that shows
				under the logo text or logo image. -->
		</a>

The below explains how the main menu links work:

Small View (Mobile):

The main menu is exposed in the small (mobile) view by tapping on the menu icon in the top left corner, as illustrated in the screenshot above.

First Breakpoint: 50em (800px) wide and “up”:

As illustrated in the screenshot above, the main menu links are displayed by default in the 50em and up media breakpoint. This is because 50em (800px) is the smallest width that the entire menu can "comfortably" display without causing the menu to wrap to a second line, or cause a horizontal scrollbar, or other similar undesired effects. Even though these 2 versions looks completely different, they are actually both displaying the same "contents", but using a media break-point to style them completely differently.

Below is the "HTML Code", this is from the header.tpl template:

	<nav class="fixed-nav">
		<a href="#page-bar" class="fixed-link menu"></a>
...
		<nav class="page-bar fixed-menu">
			<a href="index.php" class="menu-link">Home</a>
			<a href="index.php?a=1" class="menu-link">Sell</a>
			<a href="index.php?a=19" class="menu-link">Search</a>
			{addon addon='storefront' tag='list_stores_link' no_li=1}
			<a href="index.php?a=28&amp;b=135" class="menu-link">Features</a>
			<a href="index.php?a=28&amp;b=143" class="menu-link">Pricing</a>
			<a href="index.php?a=28&amp;b=141" class="menu-link">Help</a>
			<a href="index.php?a=28&amp;b=142" class="menu-link extra">About Us</a>
			<a href="index.php?a=28&amp;b=136" class="menu-link extra">Contact Us</a>
		</nav>
...
	</nav>

Note that parts not dealing directly with the main menu have been skipped, denoted by the …. The last </nav> may not directly relate to this menu, but we chose to include it in the example above to emphasize the importance of paying attention to opening and closing HTML tags³⁾.

Now to break it up some to explain each part below.

		<a href="#page-bar" class="fixed-link menu"></a>

This line adds the menu icon in the top right corner for the small (mobile) view. This is how it works, so that you can make use of this yourself for your own changes:

The class fixed-link is a special class, that does something in JS: If a link has this class, it will take the href value hash⁴⁾, remove the #, and use the result to find any elements on the page that has a matching CSS class. In this case, it uses #page-bar, so the JS looks for any elements on the page with the class page-bar. If that element is currently "hidden"⁵⁾, it will use jQuery to quickly "show" it using an animation. And conversely, if it is already not hiding, it will hide the element, again using an animation built into jQuery.

This functionality is built in, and can be re-used, your requirements for using this: Use an <a> tag similar to this:

<a href="#class-name" class="fixed-menu"></a>

<tip c n>Hint: you can add something inside the <a>…</a> tag (see the snippet above) like an image, and it will display on top of the button. Images inside this link will be styled to match the width / height of the button. The social connect addon does this when you are logged in with FB account to show the profile pic on top of the normal user menu link. Just doing this will show something that looks like the menu in the top left corner, you can further style it, even totally change it's look, by adding a second class to the <a> tag and using that to style it as needed.</tip>

The second part, now create a <div> (or other block element) with class class-name. You can change the class-name to whatever you want, just make sure the href and the class in your element match up. Then when the user taps on your menu item, it will show/hide the element matching the class.

If this functionality interests you but you want to use it for a text link, you might look into using section-collapser⁶⁾.

		<nav class="page-bar fixed-menu">
			<a href="index.php" class="menu-link">Home</a>
			<a href="index.php?a=1" class="menu-link">Sell</a>
			<a href="index.php?a=19" class="menu-link">Search</a>
			{addon addon='storefront' tag='list_stores_link' no_li=1}
			<a href="index.php?a=28&amp;b=135" class="menu-link">Features</a>
			<a href="index.php?a=28&amp;b=143" class="menu-link">Pricing</a>
			<a href="index.php?a=28&amp;b=141" class="menu-link">Help</a>
			<a href="index.php?a=28&amp;b=142" class="menu-link extra">About Us</a>
			<a href="index.php?a=28&amp;b=136" class="menu-link extra">Contact Us</a>
		</nav>

The HTML code above controls the menu links. This same HTML is used to display the smaller, and the larger view.

If you would like to add your own link to the top, you would insert your own <a> in the order you would like. The format for the link will need to be:

<a href="link_url" class="menu-link">Menu Link</a>

You can also remove items, or change the order of the links if you wish. When doing so, make sure you are copying the "entire" link entity, starting with <a …> tag and ending with the </a> tag similar to what is in the code snippet above. Make sure you do not leave out any part of it or move/remove "too much".

Remember to Test Your Changes when you make any changes to the menu!

			<a href="index.php?a=28&amp;b=142" class="menu-link extra">About Us</a>
			<a href="index.php?a=28&amp;b=136" class="menu-link extra">Contact Us</a>

You may notice in the screenshots, that the small view includes the "contact us" and "about us" links at the bottom, and the 50em breakpoint larger view, those are not part of the main menu. This is done by using the extra class on the link, any links that have this class will not be displayed in the larger breakpoint.

We want to make it clear that we (Geodesic Solutions) strongly discourage having any parts of the page inaccessible to one size or another. You can see the Philosophy page for more info. In this case, even though the links are displayed on the small view and hidden on the larger breakpoint if they have the extra class, those same links are replicated as text links above the main menu. So it is used as a way to basically move where the link appears in one view or the other. It is usually not a good idea to completely hide a link in one view or another⁷⁾ without providing the link in an alternate location "close to" the original.

Small View (Mobile):

Note that in the small view, the about us and contact us links are made to be part of the main menu, tucked away so that you tap on the menu icon in the top left corner to view.

First Breakpoint: 50em (800px) wide and “up”:

The about us and contact us links are done a little differently. This is one of the very few places that the small view and the larger view are displayed by different markup.

Note that we advise to avoid this technique as much as possible. We actually did come up with a solution that still used the same markup for both, but it was so complex that it actually took more markup then having 2 versions of the same thing in the HTML, so we opted to make an exception in this case.

		<nav class="extra-links">
			<a href="index.php?a=28&amp;b=142">About Us</a>
			|
			<a href="index.php?a=28&amp;b=136">Contact Us</a>
		</nav>
		<nav class="page-bar fixed-menu">
...
			<a href="index.php?a=28&amp;b=142" class="menu-link extra">About Us</a>
			<a href="index.php?a=28&amp;b=136" class="menu-link extra">Contact Us</a>
		</nav>

The small view is displayed with the 2 <a> tags near the bottom of the snippet above. The large view is displayed by the <nav class="extra-links"> section at the top of the snippet.

In the small view, the .extra-links is hidden with CSS. In the large view, .extra is hidden with CSS. The result is that in the small view, the about us and contact us links are "tucked away" in the expanded menu at the bottom, and in the larger view those show as text links that sit right above the main menu.

<tip c n>Tip: This technique can act as an example of how you might do something similar in your own custom design, display something as "part of" one section in one view but part of an entirely different section in another view, by using different HTML for each view and showing/hiding the different versions using CSS.

You should use this sparingly / as a last resort. We only went with this technique for the about us / contact us links, because to accomplish the same effect using a technique to still share the same HTML for both, would have actually resulted in more complex and "larger" amount of HTML than simply having the links use different HTML for the different views. So it made things less complex and less HTML for the browser to download in that specific case.</tip>

To add an additional link, you would add your link to 2 places:

First, you would add this to the top part inside the <nav class="extra-links"> section:

|
<a href="#">My Link</a>

Note the "pipe" character | before the link to separate it from the other text links.

The second part, you would add to the bottom of the <nav class="page-bar fixed-menu"> section below the about and contact us links in that section:

<a href="#" class="menu-link extra">My Link</a>

Note the use of the CSS classes "menu-link extra".

If you were adding the sample link above for "My Link" the finished snippet would look like this (this time we'll include the entire snippet without any parts skipped):

		<nav class="extra-links">
			<a href="index.php?a=28&amp;b=142">About Us</a>
			|
			<a href="index.php?a=28&amp;b=136">Contact Us</a>
			|
			<a href="#">My Link</a>
		</nav>
		<nav class="page-bar fixed-menu">
			<a href="index.php" class="menu-link">Home</a>
			<a href="index.php?a=1" class="menu-link">Sell</a>
			<a href="index.php?a=19" class="menu-link">Search</a>
			{addon addon='storefront' tag='list_stores_link' no_li=1}
			<a href="index.php?a=28&amp;b=135" class="menu-link">Features</a>
			<a href="index.php?a=28&amp;b=143" class="menu-link">Pricing</a>
			<a href="index.php?a=28&amp;b=141" class="menu-link">Help</a>
			<a href="index.php?a=28&amp;b=142" class="menu-link extra">About Us</a>
			<a href="index.php?a=28&amp;b=136" class="menu-link extra">Contact Us</a>
			<a href="#" class="menu-link extra">My Link</a>
		</nav>

You can also change the order or remove the about us and contact us links altogether. Whatever you decide to do, we strongly recommend that you mimic that in both the large and small views, it can be a bad idea to make a link completely inaccessible from one view or the other. It would also go against RWD principals in general, part of the reason to use RWD over a dedicated "mobile only" site is that you are not limiting what the visitor can do just because they are on mobile device. That said, this is your site of course so the choice is ultimately yours! :)

<tip c n>Tip: The "extra" links can actually be inter-mixed in the small view menu if you want to do so, although it may be a little confusing, you can if you want to! For instance, if you want you can move the "about us" link to be the 2nd in the menu right below "home", or anywhere else within the small view menu. As long as it includes the extra class that will not show in the large view so that you can display it in the text links above the main menu.</tip>

Also be sure to Test Your Changes whenever you make changes like this!

Small View (Mobile):

Note that user links are tucked away on the small view. As illustrated above, you would click / tap on the icon in the top right corner to expand the user links in the small view.

First Breakpoint: 50em (800px) wide and “up”:

This is another part of the design, that even though the "look" is drastically different, it was accomplished with the exact same HTML markup for both views:

<nav class="fixed-nav">
...
		<a href="#user-bar" class="fixed-link user">{addon addon='social_connect' tag='facebook_session_profile_picture'}</a>
...
		<!-- START USER BAR -->
		<div class="abs-space"></div>
		<div class="fixed-menu clearfix user-bar">
			{addon addon='social_connect' tag='facebook_session_profile_picture'}
			<div class="user-welcome">Welcome, {module tag='display_username'}</div>
			<span class="user-links">
				{if not $logged_in}
					{*Logged out code*}
					<a href="register.php" class="menu-link">Register</a>
					<a href="index.php?a=10" class="menu-link">Login</a>
				{else}
					{*Logged in code*}
					<a href="index.php?a=4" class="menu-link">My Account</a>
					<a href="index.php?a=17" class="menu-link">Logout</a>
				{/if}
			</span>
			{addon author='geo_addons' addon='social_connect' tag='facebook_login_button'}
		</div>
		<!-- END USER BAR -->
	</nav>

Note that the other parts of the header not specifically dealing with user links were skipped over in the snippet above for brevity, denoted by … in the snippet.

The first part displays the user menu icon in the small view, in the top right corner of the page. See Small View Menu Icon for general information about how the fixed-nav menu links work. The one for the user menu has the added class user, which is used to apply additional styles to that button in CSS. In particular, it shifts the background image so that it uses the part with a little stick man in the menu. Both menu links use the same image background, but "half" of the image is used for one menu item and the other half is used for the other icon. In this case it uses the right side of the background image if you wish to change the menu icon. The image to change is:

external/images/icons/menu.png

The user menu icon also does something else, it uses the addon tag from the Social Connect addon that displays the current logged in user's profile picture if it is available. Note that this is only displayed if the Social Connect addon is installed, enabled, and configured correctly, AND the user is logged in with an account that is linked to a Facebook profile.

If you wish to remove that from showing, the part to remove is the complete addon tag:

{addon addon='social_connect' tag='facebook_session_profile_picture'}

The actual contents of the user menu, use the same HTML markup as mentioned earlier. The result is a very "slim" piece of HTML code, which is always good to make the overall size smaller, and thus faster to download for mobile devices. But this does lend itself to being a little complex, so below we will explain how each part works so that you can customize it and hopefully get the results you want.

<div class="abs-space"></div>

This acts as a "spacer" for the large view, so that the user text and links do not go "behind" the main menu due to the layout for the main menu. If you make changes that affect the height of the main menu, you may need to adjust the height for the abs-space block. You can do so with the following CSS, placed in your own custom.css file:

@media only screen and (min-width: 50em) {
	/* ==========================================================================
	   Shared Breakpoint: 50em is about size that all "default" menu items fit
	   		horizontally on the page, may need to adjust this for different
	   		languages or if you have more / less menu items than default.
 
	   Breakpoint For:	   Menu Bar | Logo
	   ========================================================================== */
	/* user bar acts as the bar across the top */
	.abs-space {
		height: 6.1em;
	}
	/* Other customized CSS in the 50em breakpoint here */
}

In that example snippet, you would change 6.1em and adjust it as needed. Remember, EM unites are based on font size, and using them make your site more accessible and fluid. 1 em is the width of one character at the current font size. Use that as a guide when adjusting, so if it looks like you need to "shift down" by about what would be 1 line, try using 7.1em and see if that works. Once you get the general size adjusted you can "home in" and make fine adjustments in .1 increments if needed.

<tip c n>A quick note on media breakpoints in your custom CSS: In your custom.css file, when adjusting the CSS for something inside of a breakpoint, you will need to include the start of the breakpoint and the end as well. When you do so, make sure you do not have multiple declarations of the same break-point, in other words don't have multiple sections starting with

@media only screen and (min-width: 50em) {

You will want to combine all of your customized CSS for that breakpoint, into the same breakpoint section… In other words, say you want to also customize .user-welcome class, you would avoid having a second @media line, and instead insert your CSS before the close } for the media breakpoint. For this reason it is good idea to keep your tabs / spaces "clean" meaning when you are "inside" a media breakpoint, make sure the contents are all indented by a tab, like they are in the sample above.</tip>

Next section:

<div class="fixed-menu clearfix user-bar">

This is the start to the user section. You will see the class user-bar, if you already read about how the main menu works this should already be familiar. As a reminder, the entire section with the class user-bar is automatically expanded / collapsed when you tap on the link with the href #user-bar. See the Small View Menu Icon section for a more detailed description.

The clearfix class is added since there are floating elements in the large view, so that the floating elements don't "overflow" the user container resulting in parts overlapping on the page.

Next section:

{addon addon='social_connect' tag='facebook_session_profile_picture'}

If you have the social connect addon installed and enabled, and the user is logged in with an account that is linked to Facebook through the addon, this tag will display the user's profile picture. Note that this only happens if you use the social connect addon. You can safety remove this line if you do not wish to show the Facebook profile picture.

Next section:

<div class="user-welcome">Welcome, {module tag='display_username'}</div>

This is the Welcome, Guest part of the text. The module tag displays the user's username, or "guest" if no logged in. You can change the text as you wish just make sure to keep everything inside the <div> with the user-welcome class so that everything lines up in both views.

Next section:

			<span class="user-links">
				{if not $logged_in}
					{*Logged out code*}
					<a href="register.php" class="menu-link">Register</a>
					<a href="index.php?a=10" class="menu-link">Login</a>
				{else}
					{*Logged in code*}
					<a href="index.php?a=4" class="menu-link">My Account</a>
					<a href="index.php?a=17" class="menu-link">Logout</a>
				{/if}
			</span>

Things inside the <span class="user-links">…</span>, in the large view, will use CSS3 to automatically surround the contents with (…) like you see in the large view. It uses similar techniques to insert a pipe "|" between each element.

This uses smarty {if} tags to display one version if the person is not logged in, and something else if they are logged in. The first part, surrounded by {if not $logged_in}…{else} is what will display if the user is not logged in. By default it shows the register and login links. The section between {else}…{/if} is the second part of the if/else smarty tags, it will display if the user is logged in. By default it shows the my account link and the logout link.

Next section:

{addon author='geo_addons' addon='social_connect' tag='facebook_login_button'}

This is another Social Connect addon tag, it will only display if that addon is installed and enabled, and the user is currently not logged in. See facebook_login_button for more detailed explanation of how it works. This can be removed if you are using the social connect addon but do not want to show the login button in the header, or if you want to move it.

Geodesic developers have done lots of testing to make sure the "default design" looks good at different screen sizes and resolutions. When you add your own menu items, move them around, change the wording, or generally make any changes to the header.tpl template or CSS that affects it, you will need to do that testing yourself to make sure everything continues to look good for all your visitors.

Start off with your browser width set to be small. You may want to use Firefox with the plugin Developer Tools, if you do then simply use the shortcut CTRL+ALT+M to switch to a mode that lets you easily switch between different common sizes. Whether you use this or not, start your browser at around 300 pixels wide or so and test the parts you changed.

Slowely make the browser width wider and continue to monitor how your changes hold up. When dealing with the main menu, the breakpoint is based on the specific menu items that are in the default design, so you may need to adjust wording, or possibly consider removing some of the main links to avoid problems at the "low end" of the 800px breakpoint. You might also adjust the padding, width, font size, or other elements of the menu items if you need to squeeze more tabs in the header.

We have noticed that in Google Chrome, and possibly other browsers, as you make the window size larger and smaller and it goes across different breakpoints, sometimes things don't show or hide properly. We think this is a bug in the browser, and if you just refresh the page when it happens it should fix it. Note that the only time someone will ever see this, is if they too are playing with the width, so it is not a very common problem and should be fixed by newer versions of the browser. In every device we tested, switching from landscape to portrait mode and visa versa did not show any issues like this.

When you are testing the different screen widths, if it causes horizontal scroll bar, or causes the menu to go to a second line, you may have to consider re-wording some of the menu items, or perhaps removing any that are not essential to your site. You can also try adjusting the padding, width, and font size as well to allow more buttons to fit in the same space. Also be sure to test with a small screen width, down to 320px is the usual smallest size, just to make sure the menu looks good.

Note on changing breakpoint width: If you really need your menu to hold more items, the only way to do it might be to change the size of the breakpoint from 50em to something larger. Changing a breakpoint defined in the default CSS can be tricky to say the least, so make sure you have considered all alternatives before resolving to changing the breakpoint. This will need it's own dedicated tutorial to accomplish. ⁸⁾

If you previously used a design from 7.2.5 or earlier, you may remember the default menu used to look something like this simplified snippet:

<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 1</a></li>
</ul>

While this method works, we chose to switch to using HTML markup like this instead:

<nav>
<a href="#">menu item 1</a>
<a herf="#">menu item 2</a>
</nav>

We use this same <nav> markup anywhere that a list of navigation links need to be used. There are 2 main reasons we moved to this as the standard way to do navigation links:

First, the markup is much more semantic, it is very clear just looking at the HTML that you are dealing with navigation links. In fact that is exactly what it is, a <nav> tag (new HTML5 tag) with <a> link tags inside it, can't get much more clear and simple than that. The old "unordered list", while it is somewhat semantic, as it is indeed an unordered list of things.. Using the <nav> tag with links directly in it, we felt is very obvious, the list tags are almost redundant as it is pretty obvious these are a list of links.

The second reason, which is actually the main reason for adopting this rather than sticking with what we used before: less markup. When it comes to HTML, less is more, the less HTML there is, the less the browser / device has to download, the less the browser has to process, the faster the page will load. In some cases, with really long lists, this will save a LOT of extra HTML.