Centering the Menu or Logo

Centering elements in Allwebco web templates

Pinned Note Centering
In HTML5 templates centering is done differently than in HTML 4.01. The examples below show how the menu and logo can be centered.

See Also…

HTML 4.01 Example
For older HTML 4.01 templates, check in your "header.js" and in your "menu.js". Near the top there should be an option for alignment and centering.

  • 3rd level drop menus can not be centered.
  • In headers with social icons and / or a right side image, you may need to switch these off in the "header.js" to allow for centering.
  • Some templates may have the header split in each HTML page for a search or social icons. This will involve editing each HTML page to remove those and center the header.

HTML 5 Example
For newer HTML5 templates, centering may be done by editing the alignment variable in the top of the "header.js", the "menu.js", or classes for centering may be in the .css file(s).

In responsive templates, margins that are set like the following in the "style.css" will center the logo:
.logo-respond	{
		height: 100px;
		width: 600px;
		max-width: 600px;
		min-width: 280px;
		margin: 0 auto;
		display: block;
To align the logo left, edit the margins for the above to the following:

margin: 0 auto 0 0;

To align the logo right, edit to the following:

margin: 0 0 0 auto;

If your template does not include the above code in your .css file, check in your "header.js" and in your "menu.js". Near the top there may be an option for centering.

If your header or menu does NOT include a centering option, or use the ".logo-respond" class as in the above example, the centering is probably done in the css file(s). Check your css file(s) in the menu and header sections and look for css code "text-align:" left, right or center. Centering is usually done using either "text-align:" or using "margin: 0 auto 0 auto;"

Header centering in HTML5 mobile and iPad tablet templates:
The following centering info is only for templates with a copyright date of 2014 or earlier and will not work in templates created in 2015 or later.

To center the header logo in a t31 or t33 or iPad 1 2 or 3 mobi or tablet template.
  1. Turn off all social links in the "header.js" with a "no".
  2. Locate the following (or similar) code for the "logo.jpg" in the "header.js" and add:

    style="display:block; margin: 0 auto;" shown in this example:

    document.write('<a href="'+logolink+'"><img src="picts-mobi/logo.jpg" height="50" width="200" alt="image" class="logoimage" style="display:block; margin: 0 auto;"></a>');

    (You may need to adjust the height and width in the above for your "logo.jpg" size)

  3. In iPad01, iPad02 and iPad03 templates also remove the class="logoimage" in the above line.
  4. Remove the <br> at the end of the above line.
  5. Locate the "td-left" just above this line and edit that to "td-center".

Menu centering in HTML5 iPad tablet templates:
See the options section of your "help.html" for using the optional centered menu files.

Menu centering in HTML5 mobi t31 and t33 templates:
Some version of mobi templates may not allow for menu centering. Optionally you can try the following method.
  1. Locate the 2nd to the last line in the "menu.js" and add a second div closing tag:

    </div> shown below:


  2. Locate the following line at the top of the file:

    document.write('<div id="menudiv" class="printhide">');

    ...and right below that line copy and paste the following code:

    document.write('<div class="center-div" style="max-width:500px;">');

  3. Adjust the "max-width:500px;" in the code above until your menu stops wrapping then add an extra 5 or 10 pixels.

Related Topics:
Editing The HTML Pages
Choosing Software

Software for Editing:
Software Choices