CSS for navigation menu items

en WordPress.com Forums CSS for navigation menu items

• 

  michaelbishop852 · Member · Jan 10, 2014 at 6:05 am

  • Copy link
  • Add topic to favorites

  For this one, I’d like to know the CSS code for the main navigation menu in the Twenty Eleven theme. I’m asking because when I’m on a given page, it is also bolded in its place in the navigation menu.

  Example for michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/017-bluefield/:

  <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-34"><a href="http://michaelbishop852.wordpress.com/">Home</a></li>
  <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35"><a title="About Me" href="http://michaelbishop852.wordpress.com/about/">About Me</a>
  <ul class="sub-menu">
  	<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a title="Portfolio" href="http://michaelbishop852.wordpress.com/about/portfolio/">Portfolio</a></li>
  	<li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a title="Influences" href="http://michaelbishop852.wordpress.com/about/influences/">Influences</a></li>
  	<li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133"><a title="Favorite Quotes" href="http://michaelbishop852.wordpress.com/about/favorite-quotes/">Favorite Quotes</a></li>
  	<li id="menu-item-810" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-810"><a title="Contact Me" href="http://michaelbishop852.wordpress.com/about/contact-me/">Contact Me</a></li>
  </ul>
  </li>
  <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-36"><a title="Project Bluefield" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/">Fiction: <em>Project Bluefield</em></a>
  <ul class="sub-menu">
  	<li id="menu-item-468" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-468"><a title="Project Bluefield | Story" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/story-project-bluefield/">Story</a></li>
  	<li id="menu-item-440" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-440"><a title="Project Bluefield | Characters" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/">Characters</a>
  	<ul class="sub-menu">
  		<li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-322 current_page_item menu-item-443"><a title="Project Bluefield | Characters – 017 “Bluefield”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/017-bluefield/">017 “Bluefield”</a></li>
  		<li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442"><a title="Project Bluefield | Characters – 016 “Olivier”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/016-olivier/">016 “Olivier”</a></li>
  		<li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a title="Project Bluefield | Characters – 015 “Chisari”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/015-chisari/">015 “Chisari”</a></li>
  		<li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632"><a title="Project Bluefield | Characters – Kyler" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/kyler/">Kyler</a></li>
  		<li id="menu-item-680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-680"><a title="Project Bluefield | Characters – [Vaire]" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/vaire/">[Vaire]</a></li>
  	</ul>
  </li>
  </ul>
  </li>
  </ul></div>

  Result:
  <div class=”menu-main-menu-container”><ul id=”menu-main-menu” class=”menu”><li id=”menu-item-34″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-34″>Home
  <li id=”menu-item-35″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35″>About Me
  <ul class=”sub-menu”>
  <li id=”menu-item-49″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-49″>Portfolio
  <li id=”menu-item-132″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-132″>Influences
  <li id=”menu-item-133″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-133″>Favorite Quotes
  <li id=”menu-item-810″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-810″>Contact Me

  <li id=”menu-item-36″ class=”menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-36″>Fiction: Project Bluefield
  <ul class=”sub-menu”>
  <li id=”menu-item-468″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-468″>Story
  <li id=”menu-item-440″ class=”menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-440″>Characters
  <ul class=”sub-menu”>
  <li id=”menu-item-443″ class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-322 current_page_item menu-item-443″>017 “Bluefield”
  <li id=”menu-item-442″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-442″>016 “Olivier”
  <li id=”menu-item-441″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-441″>015 “Chisari”
  <li id=”menu-item-632″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-632″>Kyler
  <li id=”menu-item-680″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-680″>[Vaire]

  </div>

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

• 

  michaelbishop852 · Member · Jan 10, 2014 at 6:09 am

  • Copy link

  EDIT: Result:

  • Home
  • About Me
    • Portfolio
    • Influences
    • Favorite Quotes
    • Contact Me
  • Fiction: Project Bluefield
    • Story
    • Characters
      <ul class=”sub-menu”>
    • 017 “Bluefield”
    • 016 “Olivier”
    • 015 “Chisari”
    • Kyler
    • [Vaire]
• 

  michaelbishop852 · Member · Jan 10, 2014 at 6:11 am

  • Copy link

  EDIT 3:

  Result:

  • Home
  • About Me
    • Portfolio
    • Influences
    • Favorite Quotes
    • Contact Me
  • Fiction: Project Bluefield
    • Story
    • Characters
    • 017 “Bluefield”
    • 016 “Olivier”
    • 015 “Chisari”
    • Kyler
    • [Vaire]
• 

  michaelbishop852 · Member · Jan 10, 2014 at 6:14 am

  • Copy link

  EDIT 4:

  Okay, since I can’t seem to bold the link text, I’ll just use code to display the HTML, to show your what I’ve seen on the Twenty Eleven blog pages.

  <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-34"><a href="http://michaelbishop852.wordpress.com/">Home</a></li>
  <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35"><a title="About Me" href="http://michaelbishop852.wordpress.com/about/">About Me</a>
  <ul class="sub-menu">
  	<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a title="Portfolio" href="http://michaelbishop852.wordpress.com/about/portfolio/">Portfolio</a></li>
  	<li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a title="Influences" href="http://michaelbishop852.wordpress.com/about/influences/">Influences</a></li>
  	<li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133"><a title="Favorite Quotes" href="http://michaelbishop852.wordpress.com/about/favorite-quotes/">Favorite Quotes</a></li>
  	<li id="menu-item-810" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-810"><a title="Contact Me" href="http://michaelbishop852.wordpress.com/about/contact-me/">Contact Me</a></li>
  </ul>
  </li>
  <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-36"><strong><a title="Project Bluefield" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/">Fiction: <em>Project Bluefield</em></a></strong>
  <ul class="sub-menu">
  	<li id="menu-item-468" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-468"><a title="Project Bluefield | Story" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/story-project-bluefield/">Story</a></li>
  	<li id="menu-item-440" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-440"><strong><a title="Project Bluefield | Characters" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/">Characters</a></strong>
  	<ul class="sub-menu">
  		<li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-322 current_page_item menu-item-443"><strong><a title="Project Bluefield | Characters – 017 “Bluefield”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/017-bluefield/">017 “Bluefield”</a></strong></li>
  		<li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442"><a title="Project Bluefield | Characters – 016 “Olivier”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/016-olivier/">016 “Olivier”</a></li>
  		<li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a title="Project Bluefield | Characters – 015 “Chisari”" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/015-chisari/">015 “Chisari”</a></li>
  		<li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632"><a title="Project Bluefield | Characters – Kyler" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/kyler/">Kyler</a></li>
  		<li id="menu-item-680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-680"><a title="Project Bluefield | Characters – [Vaire]" href="http://michaelbishop852.wordpress.com/fiction_-project-bluefield/characters/vaire/">[Vaire]</a></li>
  	</ul>
  </li>
  </ul>
  </li>
  </ul></div>

• 

  justpi · Member · Jan 10, 2014 at 11:48 am

  • Copy link

  If you mean you don’t want it bold, add this:

  #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
  font-weight: normal;
  }

  PS Why on earth did you try to copypaste all the above? We can see your menu items, and we can see your HTML and your CSS.

• 

  michaelbishop852 · Member · Jan 11, 2014 at 2:33 am

  • Copy link

  First: I didn’t want to unbold them. I just wanted to find a way to change it because I couldn’t use :hover or :active or whatever with them.

  Second: I didn’t know that! 8-/

• The topic ‘CSS for navigation menu items’ is closed to new replies.