Navigation Medu

• 

  curriculumteam · Member · May 29, 2012 at 3:56 pm

  • Copy link
  • Add topic to favorites

  I want to move the navigation menu (with the static pages) from the top of the blog to the left hand side. Am I able to do this through the CSS customization?

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · May 29, 2012 at 3:58 pm

  • Copy link

  All CSS editing is themes specific and no one can help you unless they can see the blog and know exactly which theme you are CSS editing.

• 

  designsimply · Member · May 29, 2012 at 9:11 pm

  • Copy link

  I checked the blog linked to your curriculumteam username and I see that the http://curriculumresourcecenter.wordpress.com/ blog is currently using the Chateau theme.

  I think re-configuring the navigation from horizontal to vertical is possible with CSS, but it’s not a simple switch at all for the Chateau theme with multiple layers of menus like what you have setup. What I can do is start you out with a basic example which you can take and work with.

  First, the simplest way to accomplish putting menus into the sidebar would be to use a custom menu and set it up in a sidebar custom menu widget. In the Chateau theme, the custom menu widget doesn’t use flyout menus, so you may want to still take the CSS reconfiguration option.

  Each theme handles menu designs differently. If you’d like to give re-configuring the Chateau menu a shot, what you can do is start by looking at the original Chateau stylesheet, find the “Menu” section in that CSS, copy it into a tool such as Firebug for Firefox where you can make live edits to CSS to see how the changes will look, and start changing the numbers
  https://s1.wp.com/wp-content/themes/pub/chateau/style.css?m=1335393443g&minify=false

  Here is an example that I worked on that will move the Chateau menu to a vertical one. Note that you will need to adjust the numbers to fit your theme design and desired menu width:

  #menu {
  	position: absolute;
  	top: 380px;
  }
  .content #content {
  	padding-left: 160px;
  }
  .content .page .post-title h1 {
  	padding-left: 2%;
  }
  .content .page .post-entry {
  	width: 96%;
  }
  #menu,
  #menu > ul > li {
  	width:140px;
  }
  #menu ul ul.children {
  	left:140px;
  	top: 0;
  }
  #menu ul ul.children li {
  	width: 140px;
  }
  #menu ul ul ul {
  	left: 140px;
  	top: 0;
  }