Move ribbon row above the menu and below the logo

Ribbon - to like or not to like?

During my meetings with the clients, I've been asked numerous times the same question "Can you move the ribbon above the menu?" Personally I like it more this way as the SharePoint site looks like normal web sites that we see all the time: header that contains logo, slogan and some more stuff and then the top menu.

Here is how standard Team site looks like, especially the ribbon that is on the very top of the page:

Before customizing the master page, let's enable the publishing infrastructure - this way every change of the master page will require approval before actually appears on the site. This approach also minimize the risk of breaking the site by saving broken master page. Let's show it in steps:

Step 1 - First of all let's activate the "Server Publishing Infrastructure" for Site Collections

   1. From the site, go to Site Actions and select Site Settings
   2. Under Site Collection Administration and chose Site Collection Features
   3. Activate the SharePoint Server Publishing Infrastructure

Step 2 - next we need to  activate "Server Publishing" for the Site

   1. From the site, go to Site Actions and select Site Settings
   2. Under Site Actions chose Manage Site Features
   3. Activate the SharePoint Server Publishing

Step 3 - edit the master page in SharePoint Designer

1. From the site, go to Site Actions and select "Edit in SharePoint Designer"
2. After SharePoint Designer is loaded, open the "Master Pages" in the left menu
   
   Next 3 steps will create new master page (I always recommend new master page rather then customizing the default one).
3. From the Top Ribbon click the button "Blank Master Page" and enter some name
4. Right click on the new master page and select "Edit File in Advanced Mode"
5. Copy and Paste the HTML from the default v4.master

By default the HTML for Ribbon is on the top of the master page after the start body tag:

 Now let's move the ribbon. actually we are going to move the row that contains  the Logo of the site and the short description: it will be a bit easier as it contains less HTML then the ribbon.

1. So find the following code in the source: <div class="s4-title s4-lp"> and simply right click and select the option "Select Tag":
   
2. Cut the whole HTML that is selected
3. Paste the HTML above the ribbon row which is
   <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">Also shown below where to paste the HTML: 

After doing this simple step we managed to get this:



 Here are few more examples how this small change affect the whole look&feel of the site: