Put the nav column on the right

This is soooooo easy to do, you simply change the floats of the two columns, couldn't be easier. So the complete custom css that you add to site designer now looks like this...


#PageWrapper{background-color:transparent;}
#HeaderWrapper {background:#000; height:58px;}
#Header {width:100%; max-width:1150px;}
#FooterWrapper {background-color:#000;}
#ColumnsWrapper {background:url()#fff;}
#ContentColumn .Liner {padding:0 5%; background:url();}

/*THESE 2 LINES SWAP THE COLUMNS */
#ContentColumn {width: 75%;float: left;}
#NavColumn {width: 25%;float: right;}

/***OPTIONAL EXTRA - THIS LINE ADDS PADDING TO GRID BLOCKS***/
.ImageBlock {padding:5px 15px;}

@media only screen and (max-width: 768px) {
.desktopOnly {display: none !important;}
.mobileOnly {display: block !important;}

That is the total custom css used.  Not a whole lot, eh? So Let's take it a little further and look at how we might get a single column page (perhaps a sales page?)

And as you can probably guess this is also going to be easy, we just need to change the properties of those 2 extra lines of css we added before.

Change this...

#ContentColumn {width: 75%;float: left;}

#NavColumn {width: 25%;float: right;}

to this...

#ContentColumn {width: 100%;float: none;}

#NavColumn {display:none;}

Warning with hiding adsense in hidden columns

If you have an Adsense block in the nav column, then you cannot simply hide the column as it is... that is against their policies.

If the Adsense is in a sitewide dot, then you should close that dot on the single column page, and then hide that column. If you do that, then the contents of that dot are never put into the source code... problem solved. If it's not in a sitewide dot then you wouldn't have it on the page in the first place. ;-)

Put a Top Nav On the Single Column Page

If you only have one column on the page, then you need a nav (Im assuming you have your nav in the hidden side column. If you are using a top nav then the following instructions don't apply to you).

  • Close the Top of Header Sitewide Dot so you can see what you are doing.
  • Drag a container to just below it, NOT into any dot, and set this to Desktop/Tablet
  • Drag a navbar into this container, choose the horizontal one and center it.
  • Open the top sitewide dot back up again and preview before saving.


Comments

Have your say about what you just read! Leave me a comment in the box below.