Customising Origin theme menu

  • Author
  • #1843696



    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?




    Try this:

    #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?


    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.

The topic ‘Customising Origin theme menu’ is closed to new replies.