Support » Themes and Templates » Menu Border Problem

  • Hello all, I am new to wordpress and I have a functioning site except for one problem. My menus border will not wrap around the whole menu leaving the bottom portion bare. It appears that my theme, Zenon Pro has a color scheme that overrides the bottom border to make it 12px in style.css, but when I change it to 1px and change the color to black, it doesn’t update it. My site is and I would really appreciate it if someone could tell me what I am doing wrong or if I need to add some code to overide it. My site looks great, except for this one problem…

Viewing 15 replies - 1 through 15 (of 20 total)
  • In your CSS, delete this rule:

    #topmenu {
       border-bottom-color: #fceaf0!important

    Was this rule added through some custom CSS option in your theme?

    In your style.css file, there’s this rule:

       border:1px solid #ececec;
       border-bottom:12px solid #ececec;

    Delete the border-bottom property from this rule altogether, or override it in your theme’s custom CSS option.

    By the way, you should not be editing your theme files directly. Instead, you should be working from a child theme so that your changes aren’t lost if the theme gets upgraded. If you are just making CSS changes through your theme’s custom CSS option, then you don’t have to work from a child theme.

    Thank you CrouchingBruin, I have a problem, though I attempted to create a child css, but I get this error during live preview…

    Warning: require_once(/home/floydstime/ [function.require-once]: failed to open stream: No such file or directory in /home/floydstime/ on line 459

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/floydstime/’ (include_path=’.:/usr/local/lib/php:/usr/local/php5/lib/pear’) in /home/floydstime/ on line 459

    Oh yes the rule was added as a the secondary theme color.

    Ok, so I deleted the line, but now there is no boder at the bottom, so I changed the code to this ‘border-bottom:1px solid #824f53;’ , but there is still no border at the bottom, but at least that weird color block as deleted, any ideas?

    I still see this rule in your CSS:

    #topmenu {
    border-bottom-color: #fceaf0!important;

    It’s this rule that’s keeping the bottom of the border a light pink color, and overriding the property that you put in. Can you find it in your theme’s custom CSS option field?

    It’s not in my style.css am I looking in the wrong place?

    That is correct, it is not in your style.css file. If you do a view source on your web site, you’ll see a bunch of inline CSS towards the top of the page (although all of the rules are mashed together). That’s why I asked if the theme has a custom CSS option field; many themes will allow you to add your own CSS through this option field instead of having to modify the style.css file. Or is it possible you installed a CSS plugin? How did you change the background color to light blue? It’s in the same section of CSS.

    Ok so I think I might have found something. In the skins.php I found this under secondary color…

    #topmenu{ border-bottom-color:<?php echo of_get_option(‘secelm_colorpicker’); ?>!important;}

    I deleted it and it seems to have fixed the problem on every other page, but the main page with the slider. I noticed the slider was bumped against the menu, so I placed a margin on the top of the slider, but to no avail, there is still no bottom border on the main page. I think I am going to seriously pull my hair out.

    The menu on the home page actually looks OK to me, now. Maybe you have to clear your browser’s cache to see it.

    It doesn’t look OK on the Four Little Ducks Take a Walk page, though. Weird…

    I think I just fixed it… I also found this

    #zn_slider, #sidebar .widgettitle, #sidebar .widgettitle a{border-color:<?php echo of_get_option(‘secelm_colorpicker’); ?>;}

    I took out, #topmenu ul li ul, hopefully, that did it… before you looked at it lol

    Last question, BTW you are awesome, What if I wanted to wrap the borders on the submenu the same way they are on the topmenu… How would I do that…

    Try adding this CSS rule:

    .sub-menu .menu-item {
    border: 1px solid #ececec;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;

    If you don’t want rounded corners, take out the last three properties (all the ones that say radius). Or you can make the corners a little less rounded, like 4px instead of 8px.

    I love it! I was thinking we were going for a straight line down with a rounded border at the bottom, but I like this better!! I am going to try the 4px radius and see what that looks like!

    New problem, I used the same rule to put a border around the slider, but the top two corners do not have a radius?

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Menu Border Problem’ is closed to new replies.