Need help? Check out our Support site, then


Customising Origin theme menu

  1. Hello,

    I currently have my top bar menu displayed as none as I need to work out first how to get it how I want. I basically want four items along the top, centered, with a decent amount of space between the header and the top of the first blog post. I'd also like to put a divider in. Can anyone help me with this?

    Thanks!

    Emily

    The blog I need help with is curious-london.co.uk.

  2. Try this:

    #menu-primary,
    #menu-primary .menu,
    #menu-primary .menu ul,
    #menu-primary li,
    .menu li {
        float: none;
    }
    #menu-primary {
        margin: 40px 0 40px 0; /* set white space between top and bottom of menu */
    }
    #menu-primary .menu ul {
        text-align: center;
    }
    #menu-primary li {
        display: inline-block;
    }
    #menu-primary li a {
        margin-left: 0;
        padding: 0.3em 0.75em;
    }

    I'd also like to put a divider in.

    Where exactly were you aiming to have the divider?

  3. I came up with a slightly different solution.

    To center the main menu:

    .header-main {
    	text-align: center;
    }
    #primary-navigation {
    	display: inline-block;
    	float: none;
    }

    To add extra spacing between main menu items:

    @media (min-width: 960px) {
    	#primary-navigation a {
    		padding-left: 1.5em;
    		padding-right: 1.5em;
    	}
    }

    I used the @media part to limit the last change to screens larger than 960px to try to prevent the menu from falling over to two lines when it shouldn't.

You must log in to post.

About this Topic