format menu without wrap

• 

  jakepht · Member · Feb 9, 2015 at 1:36 am

  • Copy link
  • Add topic to favorites

  Hi,
  If you go to my wordpress you’ll see that the menu links are not positioned at the left side of the page, but appear just to the right of the page title. The thing is, I don’t have a page title because the title is already in the header. So, this leaves me with a menu that is just to the right of an invisible title.
  What sort of CSS-ing can I do to remove the page title container to make more space for my menu. I want the menu to be on one row, not two.
  Thanks

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

• 

  staff-happychia · Staff · Feb 9, 2015 at 8:13 am

  • Copy link

  Remove the page title container.

  #branding {
  	display:none;
  }

  Let the menu take 100% of the width. Originally it was told to occupy 75% of the width but since we chucked the page title container, we can let the menu enjoy all the space :-)

  #menu-primary {
  	width: 100%;
  }

  This is optional to move the menu to the left. If you don’t add this rule, then menu is right aligned, which looks great as well. So decide if you want to add this.

  #menu-primary .menu {
  float: left;
  }

  Please add these styles and let me know if you need anything else :-)

• 

  jakepht · Member · Feb 10, 2015 at 1:26 am

  • Copy link

  chaitanyamsv – you’ve done it again. I changed the menu width but kept the right alignment. Looks great. Thank you.

  As a bonus question, are the pieces like #branding standard between all websites, or is that specific to how my wordpress template is set up? Can one learn this CSS code to be useful across several platforms, or is it theme-to-theme specific? Just wondering if it’s worth me trying to find a comprehensive resource to keep bookmarked.

• 

  staff-happychia · Staff · Feb 10, 2015 at 5:07 am

  • Copy link

  CSS selectors generally vary across the themes. Although some selectors like #branding, #entry-title, #entry-content etc. tend to be common, it is always a good idea to check using browser’s inspector tools.

  CSS is a generic skill which you can learn on many places on the web for free like Codecademy or Khan Academy or Tuts+ and heaps of other places.

  Here are some support documents to get you started:

  http://dailypost.wordpress.com/2013/06/21/css-intro/
  http://dailypost.wordpress.com/2013/07/25/css-selectors/
  http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/
  http://en.support.wordpress.com/custom-design/css-basics/
  http://en.support.wordpress.com/custom-design/editing-css/