A Fluid Header

Create A Longer (Custom) Main Menu

By default, Twenty Ten’s main menu only includes two menu items. Many sites have more than this. Please create a custom menu:

  1. Exit Microthemer by clicking WordPress icon at the very top right of the Microthemer interface.
  2. Hover your mouse over the Appearance link in the WordPress dashboard menu on the left.
  3. Choose Menus from the sub-menu that flies out.
  4. In the Menu Name field at the top enter Header (replacing the ‘Menu 1’ text).
  5. Expand the Posts section on the left of the page (see screenshot above).
  6. Check the Hello World! checkbox and then click the Add to Menu button.
  7. Re-check the Hello World! checkbox and click the Add to Menu button. Do this one more time until you have a total of three Hello World menu items.
  8. Click the Create Menu button.
  9. Scroll down to the bottom of the page.
  10. Check the Primary Navigation checkbox.
  11. Click the Save Menu button.
  12. Return to Microthemer. You will notice that the main menu bar is wider now, with several ‘Hello world!’ menu items.

By creating a custom menu with the name Header, you have ensured that your menu’s HTML code is exactly the same as the one used in this tutorial. This is a small but important point.

Now on to styling the header elements.

Drag the preview screen width down using the top horizontal ruler. You will notice that making the page wrapper fluid hasn’t helped much. The image and main menu both get cropped. This is because the content inside the fluid wrapper is still rigid. In this section I will show you how to make the various header components fluid. I will also flag the problems nested HTML elements create and demonstrate how to deal with them.

GUI Method

A Fluid Banner Image

At smaller screen sizes, the banner image gets cut off instead of scaling down. You can fix this by creating a selector that targets the banner image and then apply new styles to it.


  1. Click the All Devices tab to reset the preview to full width.
  2. Double-click the banner image.
  3. Go to the Targeting tab of the selector wizard that appears on the right if you’re not on it already.
  4. The first suggestion in the list, which is selected by default, will do fine: div#branding img
  5. In the Name field, enter Banner Image.
  6. In the Folder field, select Header.
  7. Click the CREATE SELECTOR button.
  8. Go to the Dimensions property group.
  9. Set  width to 100%.
  10. Set  height to auto (if you want the image to scale down proportionally).

Drag the preview screen width slider down and try not to be too disappointed. The image will still be stubbornly rigid. You have stumbled across the Nested elements pitfall. A common cause of CSS confusion.

The image doesn’t scale down because it is inside another fixed width element. The fixed width parent element doesn’t adjust to screen size. And so the image will be 100% of a fixed width, which is equivalent to having a fixed width itself. The first step to solving this problem is to identify which parent element has a fixed width value.

  1. Right-click the banner image and choose Inspect to launch Chrome’s inspector.
  2. In the pane on the left, the line of HTML for the image will be highlighted.
  3. Click on the line of HTML that corresponds to the banner image’s first parent. This will be the first line of HTML above the currently highlighted line that is slightly indented to the left. Hint: the line that starts with <div id=“branding”…
  4. Observe the CSS styles in the right pane. You may need to scroll.
  5. The #branding element does indeed have a fixed pixel value for width of 940px.
  6. The #branding element is therefore the element that must be changed. If it didn’t have a fixed value for width you would need to check this on the next parent element.

The second step is to make the fixed width #branding element fluid via Microthemer:

branding-auto-style

  1. Double-click the banner image to launch the selector wizard.
  2. Go to the Inspector tab if you’re not there already.
  3. Click the  up arrow on the directional controls once to move up to the div element that has an id of ‘branding’.
  4. Microthemer’s blue highlighting won’t give you any useful feedback because the branding element wraps only floating elements, and unlike the header element, has no padding. It’s total height is therefore 0.
  5. In the Name field, enter Branding.
  6. In the Folder field, select Header.
  7. Click the CREATE SELECTOR button.
  8. Go to the property group.
  9. Set  width to auto.

Drag the preview width slider down and rejoice. The image should scale down and finally the site is starting to look slightly responsive!

A Fluid Main Menu

You may notice that the main menu is still rigid. As before, the trick is to identify which elements have fixed width properties.

Menus always contain nested HTML elements. As was the case with the banner image, the nesting isn’t always obvious. Chrome’s inspector can give you the insights you need though.

  1. Click the All Devices tab even though you should already be on it for the purpose of setting the site preview to full width again. Alternatively, drag the top horizontal ruler to the far right.
  2. Right-click the first menu item (‘Home’) and choose Inspect to launch Chrome’s inspector.
  3. Click the lines of HTML above to see which parent elements have fixed widths.
  4. Notice that a div element with a class of menu-header and another div element with an id of access both have fixed width values. Remember, an element has a fixed width if the CSS pane on the right reports a width value in pixels (px). Make a note of these HTML elements.
  5. Double-click the menu area to the right of the menu links (the empty black area) to launch the selector wizard.
  6. Go to the Targeting tab if you’re not on it already.
  7. This is where you will do things slightly differently. Copy the following selector in the list: div#access.
  8. Go to the Inspector tab.
  9. Click the down arrow on the directional controls once.
  10. Click the  right arrow on the directional controls once.
  11. The HTML shown below the directional controls should be: <div class=”menu-header”>…</div>
  12. Go to the Targeting tab.
  13. Insert your cursor at the end of the first selector in the list: div#access div.menu-header
  14. Type a comma and then paste the code you copied resulting in: div#access div.menu-header, div#access
  15. Using a comma allows you to apply the same styling to multiple selectors without having to repeat style values.
  16. In the Name field, enter Menu Containers.
  17. In the Folder field, select Header.
  18. Click the CREATE SELECTOR button.
  19. Go to the  Dimensions tab.
  20. Set  width to 100%.
  21. Drag the preview screen width down. The header should be looking better at smaller screen sizes now.

Fluid Site Meta

The site title and site description, which are normally on the same line as each other, split onto two separate lines on small screens. This isn’t a catastrophe design wise, but it’s an accidental consequence. You can fix it by making the site title and description fluid too.

inpsect-site-meta

  1. Right-click the site title text and choose Inspect to launch Chrome’s inspector.
  2. Click on the nearby lines of HTML above and below to see which parent and sibling elements have fixed pixel (px) widths.
  3. You will notice that two div elements with an id of site-title and site-description have fixed width values of 700px and 220px respectively. Make a note of these.

A Fluid Site Title

fluid-site-title

  1. Click the All Devices tab even though you should already be on it for the purpose of setting the site preview to full width again.
  2. Double-click the site title to launch the selector wizard.
  3. Go to the Inspector tab.
  4. If the HTML code below the directional controls displays: <a>…</a>, you have targeted the link (<a>) HTML element nested inside the #site-title element. In which case, click the  up arrow on the directional controls twice until the value beneath shows: <div id=”site-title”>…</div>. Note, if the code on the inspector tab already shows <div id=”site-title”>…</div>, you don’t need to click the up arrow at all.
  5. Go to the Targeting tab.
  6. The default CSS selector suggestion at the top of the list will be: div#branding h1#site-title. This is unsuitable because the Twenty Ten theme uses a div element instead of a h1 element for all pages except the home page. So to make the selector target the site title on every single page, remove the h1 resulting in: div#branding #site-title.
  7. In the Name field, enter Site Title.
  8. In the Folder field, select Header.
  9. Click the CREATE SELECTOR button.
  10. Go to the  Dimensions tab.
  11. Notice that the current  width of the site title is 700px.
  12. Click the All Devices tab even if you are already on it to ensure that the site preview is full width. This is necessary for the following auto-conversion to work correctly.
  13. In the  width field enter: =%(700). This tells Microthemer to calculate 700px as a percentage of the parent container’s width (which Microthemer will can tell is 940px).
  14. Microthemer will auto-convert =%(700) to 74.468% and explain how the calculation was done in the notification at the top right.

A Fluid Site Description

fluid-site-desc

  1. Double-click the site description text to launch the selector wizard.
  2. Microthemer should target the correct element first time. This will be displayed under the directional controls on the Inspector tab: <div id=”site-description”>…</div>
  3. In the Name field, enter Site Description.
  4. In the Folder field, select Header.
  5. Click the CREATE SELECTOR button.
  6. Go to the Dimensions tab.
  7. Notice that the current  width of the site description is 220px.
  8. In the  width field enter: =%(220)
  9. Microthemer will auto-convert =%(220) to 23.404%.

The site title and description will continue to stack side by side on smaller screens now. Some extra work will be needed for tidiness, but we can leave that for now.

fluid-site-meta

Microthemer Note: Auto-Conversions

Microthemer auto-converts pixels to percentages when you enter an excel-style formula e.g. =%(220). Microthemer queries the width of the parent element to perform this calculation. If your selector targets more than one element, Microthemer uses the parent of the first element in the selection. You can override this by providing a number as a second parameter e.g. =%(220, 2) would tell Microthemer to perform the calculation for the second element in the selection.

You may prefer to set this auto-conversion behaviour by default. You can do this via the CSS Units tab in the preferences. Choose ‘px to %’ or ‘px to em’ from the available list of default CSS units and functions. Whenever you type a number Microthemer will convert it to an equivalent percentage or em. But please leave the default unit settings while you work through the rest of this tutorial.

Code Method

A Fluid Banner Image

code-banner-image

  1. Right-click the banner image and choose Inspect to launch Chrome’s inspector.
  2. Notice that the image has no id or class attribute. The banner image can still be targeted though. The selector used in Twenty Ten’s stylesheet provides inspiration: #branding img (Chrome reports this in the CSS pane on the right).
  3. Start a new line in the code editor and type the following code:
#branding {
   width:auto;
}
#branding img {
   width:100%;
   height:auto;
}

Some points to note:

  • Two selectors were required. One for the banner image (#branding img) and another for the parent branding element (#branding). The branding element has a fixed width by default. In order for the image to behave in a fluid way, the branding element also needs to be fluid.
  • The #branding img selector uses a technique for targeting an element based on the id of its parent. The banner image doesn’t have it’s own id for use with a straightforward hash-prefixed (#) selector. But by specifying the context of the parent element (that does have an id) and then typing the image’s tag name, separated by a space, it’s possible to target the image precisely. There are no other images inside the branding element. If there were, #branding img would target all of them.
  • Setting height to auto ensures that the banner image scales down proportionally.  Otherwise it would be 198px tall, as per the height attribute in the image’s HTML.
  • Decrease the preview width and observe how the banner image scales down now.

A Fluid Main Menu

code-fluid-menu

  1. Right-click the first menu item (‘Home’) and choose Inspect to launch Chrome’s inspector.
  2. Click on the HTML lines above to see which parent elements have fixed widths.
  3. You will notice that a div element with a class of menu-header and another div element with an id of access both have fixed width values. Make a note of these.
  4. Start a new line in the code editor and type the following code:
#access, #access .menu-header {
   width:100%;
}

Some points to note:

  • Using a comma allows you to apply the same styling to multiple selectors without having to repeat style values. This selector makes both fixed width elements fluid in one quick go.
  • #access .menu-header is used instead of just .menu-header because the Twenty Ten theme uses #access .menu-header. This has higher specificity (110) than .menu-header by itself (10). And in order for Microthemer to override styles set by Twenty Ten, the selectors must have equal or greater specificity. The educational note on CSS specificity later in this tutorial explains the rules.

A Fluid Site Title

code-fluid-site-title

  1. Right-click the site title text and choose Inspect to launch Chrome’s inspector.
  2. Click on the HTML lines above to see which parent elements have fixed widths.
  3. You will notice a div element with an id of site-title has a fixed width value of 700px.
  4. Click on the HTML line for the branding div just above the site-title div.
  5. Click on the Computed tab in Chrome’s inspector (near the top right). The diagram shows that the branding div has a width of 940px. Make a note of this.
  6. Start a new line in the code editor and type the following code:
#site-title {
   width: 74.468%;
}

Some points to note:

  • The objective here is to give the site title the same width of 700px but define this as a percentage so it shrinks on smaller screens. With the help of Chrome’s inspector you discovered that the parent branding element has a width of 940px. So 700px as a percentage of 940px is 74.468% (700/940*100).

A Fluid Site Description

code-fluid-site-desc

  1. Right-click the site description text and choose Inspect to launch Chrome’s inspector.
  2. Click on the HTML lines above to see which parent elements have fixed widths.
  3. You will notice a div element with an id of site-description has a fixed width value of 220px.
  4. The HTML shows that the branding div is also the direct parent of the site-description. You know it’s width to be 940px.
  5. Start a new line in the code area and type the following code:
#site-description {
   width: 23.404%;
}

Some points to note:

  • A similar calculation to the one used for the site-title was performed. 220px as a percentage of 940px is 23.404% (220/940*100).

code-fluid-header

Nested Elements

As you’ve learned, web pages are made up of HTML elements.  Each element can have other elements inside them which we call ‘child elements’. We say that child elements are ‘nested’ inside parent elements.

Chrome’s inspector reveals the nested nature of HTML pages. All web pages have a <html> element that contains a <head> and <body> element. It’s then up to the theme author to decide which elements should nest at ever increasing depths to complete the page. So far you’ve seen a #wrapper div, containing a #header div, containing a #branding div, containing a banner image. It is not uncommon for web pages to nest considerably deeper than four levels.

It’s not always obvious which element has been assigned the CSS value you want to change. The branding element could have caused hours of frustration when trying to make the banner image fluid. It was invisible to Microthemer and Chrome’s page highlighter because it contains floating elements. This situation can happen frequently. Twenty Ten’s main menu contains an invisible div.menu-header and ul#menu-main-menu element. They are not illuminated because they contain floating menu items.

A parent element can also be hard to spot when there is no padding, border, or margin separating it from its child. Parent and child occupy exactly the same space on the page. And so highlighting alone gives no clue about which element is being targeted. This happens with the menu items (<li>) and their child links (<a>) in Twenty Ten.

Look out for nested elements when your styles aren’t working as you expect.

Close