Customising Origin theme menu

  • Author
    Posts
  • #1843696

    curiousemily
    Member

    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

    #1843812

    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?

    #1843901

    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.