Customising Origin theme menu

• 

  curiousemily · Member · May 17, 2014 at 10:31 am

  • Copy link
  • Add topic to favorites

  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

• 

  colorfultones · Member · May 17, 2014 at 5:21 pm

  • Copy link

  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?

• 

  designsimply · Member · Jun 20, 2014 at 7:35 pm

  • Copy link

  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.