Remove Border from .menu-home-container

  • Author
  • #2141676



    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.


    The blog I need help with is


    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:


    To this:

    .menu-home-container ul

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




    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.



    The “ul” element is an unordered list. More info:

    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:

    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!!).



    That’s fantastic.

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



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

The topic ‘Remove Border from .menu-home-container’ is closed to new replies.