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

by Elaine on December 16, 2011

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:

cmsmind joomla elaine move mainmenu above header 1 Joomla 1.7 Tutotrial   How to Move the Main Menu to Top Left Corner

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

cmsmind joomla elaine move mainmenu to top above logo 2 Joomla 1.7 Tutotrial   How to Move the Main Menu to Top Left Corner

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 cmsmind elaine move mainmenu above header 4 Joomla 1.7 Tutotrial   How to Move the Main Menu to Top Left Corner

    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

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

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

{ 3 comments… read them below or add one }

Bala January 2, 2012 at 12:51 am

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.

Reply

Elaine January 3, 2012 at 7:57 pm

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

Reply

Anne November 15, 2012 at 4:44 am

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

Reply

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: