Remove Border from .menu-home-container

• 

  xorlx · Member · Nov 18, 2014 at 12:06 pm

  • Copy link
  • Add topic to favorites

  Hi.

  I am trying without success to remove the faint border around my
  .menu-home-container box. I have tried adding the following to my CSS:

  .menu-home-container {
  border: none;
  box-shadow: none;
  margin: none;
  }

  though it still persists.

  Can someone please inform me of the correct syntax here?

  Many thanks in advance.

  Regards

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

• 

  designsimply · Member · Nov 18, 2014 at 12:45 pm

  • Copy link

  You’re close! It looks like the border is on the “ul” element inside the “.menu-home-container” element, so you just need to change this:

  .menu-home-container

  To this:

  .menu-home-container ul

  And inside that block, you probably only need the border property and not box-shadow or margin.

• 

  xorlx · Member · Nov 18, 2014 at 1:09 pm

  • Copy link

  Wonderful!

  Thanks a million!

  Can I just ask what the “ul” element is?

  Also, do I have any say over the format of the box which appears around each menu item when it is selected?

  Many thanks.

  Regards

• 

  designsimply · Member · Nov 18, 2014 at 2:41 pm

  • Copy link

  The “ul” element is an unordered list. More info:
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

  You can certainly style the menu items. Here is a short example that will change the background color for menu items to yellow as an illustration:

  .main-navigation li.current_page_item a,
  .main-navigation li.current-menu-item a,
  .main-navigation li:hover > a {
  	background: yellow;
  }

  Here are some tutorials to get you started if you want to learn more about what you can do with CSS:
  http://www.htmldog.com/guides/cssbeginner/
  http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

  And here is a help page that explains how to use your browser tools to find the selectors your theme is using (which is very handy!!).
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

• 

  xorlx · Member · Nov 18, 2014 at 3:02 pm

  • Copy link

  That’s fantastic.

  Really appreciate your help. And also the links – looks like I’ve got some reading to do!

  Cheers!

• 

  designsimply · Member · Nov 18, 2014 at 10:59 pm

  • Copy link

  One of the links is an interactive tutorial. I hope you like it!