Loading...
Joomla

Joomla 1.7 Tutotrial – How to Move the Main Menu to Top Left Corner

I received an comment request from Apandit a few weeks ago, and another reminder today.  Sorry I didn’t get to it sooner.  Apandit had 2 requests that are specific to the Joomla 1.7 Beez_20 Template:

  • How to move the Main Menu bar to the Top of the page &  Above the logo.
  • How to move the search bar to be beside the Font re-sizers.

After following the Joomla tutorial below, your Joomla 1.7 frontpage will look like the screenshot below:

Joomla 1.7 Move Main Menu to the top of page Above Header
Joomla 1.7 Move Main Menu to the top of page Above Header

I believe the second question is already answered in the new version of Joomla 1.7.3.  The search bar is already situated to the right of the font resizers.  So that was an easy question to answer.   The first question requires css editing which you can perform in your Joomla 1.7 administrator backend.   As you will see later on, it will cause another problem which I will show you again how to solve.

Move the Main Menu Links to Above Joomla Logo.

Overview:

  • Move the Main Menu to above the Logo in the Template Manager
  • Find the Main Menu css code
  • Remove the big white space between Main Menu and Logo in the Template Manager

1.   Move the Main Menu to Above the Logo in the Template Manager

Joomla 1.7 - Click on 'Templates' tab to edit the template CSS
Joomla 1.7 - Click on 'Templates' tab to edit the template CSS

To move the Main Menu to above the logo and on the top left corner of the frontpage, you will need to edit the Beez_20 Template Personal.css:

  • Login to your Joomla 1.7 administrator backend
  • Click on ‘Extensions’, ‘Template Manager’
  • Click on the ‘Templates’ tab
  • Click on ‘Beez_20 Details’
  • Click on ‘Edit css/personal.css’
  • If you need more help with that, click here for my post.

2.  Find the Main Menu css code

In the personal.css file, there is a #header ul.menu that controls the spacing of your mainmenu.  Once you edit the top padding there, it will adjust the spacing from the top of the page:

  • Search for the text
#header ul.menu
  • Change code below it, From:
#header ul.menu  {     top:5em;
  • Change code To:
#header ul.menu  {     /* Change Made Dec 16, 2011 by Elaine - Move the mainmenu to the top left above the logo */     /* top:5em;*/     top:0em;
  •  After you refresh your website, you will see a huge white space gap between the Main Menu and the logo, it will look like this:
  • Joomla 1.7 - Move Main Menu Produces Large White Gap
    Joomla 1.7 - Move Main Menu Produces Large White Gap

 

 

 

 

 

3.  How to Remove the Huge white space gap between the Main Menu and Logo

To remove the huge white space (That used to be the Main Menu), we just need to continue to edit the ‘personal.css‘ file.  You will find a piece of code that controls the ‘logo’ position:

  •  Search for the text:
#all #header
  • Change code below it, From:
#all #header  {padding-top:8.0em ;  }
  • Change code To:
#all #header    /* Change Made Dec 16, 2011 by Elaine - Remove white space between Main Menu and Logo */  /* {padding-top:8.0em ; */  {padding-top:5.0em ;  }

After you click on ‘Save & Close’, your Frontpage should look like the screenshot at the very top.  It will look nice and clean.

If you have any questions, please let me know.

Thanks, Happy Holidays!

Elaine

3 comments
  1. Bala

    First, Happy New Year. Thank you for the steps above. One issue I noticed is, When I applied the above changes, all the top menu items bread crumbs stopped working. Any advise to correct that issue? Thank you.

    1. Elaine

      Hi Bala,
      Happy new year to you too. All your menu items and breadcrumbs stopped working? Can you show me? Send it to my email address. Elaine @ Cmsmind.com.
      Thanks for your visit,
      elaine

  2. Anne

    hi, Elaine
    Thanks for your tutorial. The tricky thing for me is that no matter how I change the code in personal css, the logo and background is totally unchanged. This drives me crazy.
    Please help

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Captcha Reload