Need help? Check out our Support site, then


Ari theme: how to move page link up top

  1. Hello. Two questions. 1/ I'm using the Ari theme and would like to add an About page. I can see how to add it to the primary or right sidebar, but is it possible to add it along the top... more like a traditional navigation bar? 2/ Also, I'd like to make the typesize of the headline for each individual post bigger... is this possible? Any help gratefully received. Bit of a CSS newbie.

    The blog I need help with is 10thingsby.com.

  2. 1/ I'm using the Ari theme and would like to add an About page. I can see how to add it to the primary or right sidebar, but is it possible to add it along the top... more like a traditional navigation bar?

    Switching navigation from the sidebar to the top of a blog is possible, but it's not a simple task. I've worked on it and I came up with a starting point for you. It makes the header and navigation full-width and rearranges the navigation for the Ari theme so it's horizontal. Note that there is probably more than one way to do this and you may need to make additional adjustments as you go, especially if you make other CSS changes that affect the ones here:

    #page {
    	padding: 0;
    }
    #main {
    	margin-top: 12em;
    }
    #subsidiary {
    	width: 1020px;
    	background: #fff;
    	height: 95px;
    	padding-top: 20px;
    	z-index: 9;
    }
    .main-navigation {
    	width: 1020px;
    	background: #fff;
    	display: block;
    	position: absolute;
    	height: 28px;
    	border-bottom: 1px dotted #4C4C4C;
    	z-index: 9;
    }
    .main-navigation li {
    	float: left;
    	padding-left: 20px;
    	border-bottom: none;
    }
    .main-navigation ul ul {
    	left: 0;
    	top: 29px;
    }
    .main-navigation ul ul a {
    	padding-left: 0;
    	margin-top: -2px;
    }

    Notes: If you have too many menu items, they will fall over to another line and look weird. Stick to a top level that fits on one line. Also, I only tested one level deep for submenus, but the rest should be okay.

  3. 2/ Also, I'd like to make the typesize of the headline for each individual post bigger... is this possible?

    Sure it is. :) Try this:

    .single .entry-title {
    	font-size: 3rem;
    }

    Adjust the number as necessary. Note that this affects just individual posts, to make it work on the home page too, remove ".single" from the beginning.

  4. Hi designsimply, thanks loads for looking into this for me.

    Unfortunately, when I try the solution to Q1, it runs the text in the left sidebar along the middle of the post, rather than above it. Maybe what I'm looking to do just isn't possible? was previously using Wu Wei which ran the Home page and About page along the top above the posts, but switched to Ari as I wanted the sidebars.

    Howeverrrr! Just tried your solution to Q2 and that did work so I'll have a play about with it.

    Thanks loads, LD.

  5. Sorry, I should have mentioned the requirements for that example to work. I tested that code on a blog using the Ari theme with one custom menu created and setup as the "primary navigation" on the Appearance → Menus page. I didn't account for there being widgets below the navigation on the left in my first example, so I updated it a little:

    #page {
    	padding: 0;
    }
    #main {
    	margin-top: 162px;
    }
    #masthead {
    	width: 1020px;
    	background: #fff;
    	height: 95px;
    	padding: 20px 0;
    	margin: 0;
    }
    a.sd-button > span {
    	opacity: 1;
    }
    .slideshow-window {
    	z-index: -1;
    }
    .main-navigation {
    	width: 1020px;
    	background: #fff;
    	display: block;
    	position: absolute;
    	height: 28px;
    	border-bottom: 1px dotted #4C4C4C;
    	z-index: 9;
    	margin-top: -20px;
    }
    .main-navigation li {
    	float: left;
    	padding-left: 20px;
    	border-bottom: none;
    }
    .main-navigation ul ul {
    	left: 0;
    	top: 29px;
    }
    .main-navigation ul ul a {
    	padding-left: 0;
    	margin-top: -2px;
    }

    Note that other custom CSS you add may also affect this CSS and so this example may not work as a straight copy/paste for you. If you have any trouble testing it, try removing your previous custom CSS as a test and make sure you have setup a custom menu as described in the requirements above.

    It's a bit of a tricky request. As I said, it's possible, but not simple.

  6. I tested on a different blog because your blog didn't have a menu showing when I looked at it. I'd be happy to take another look after you add a menu if you'd like.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags