WordPress.org

Ready to get started?Download WordPress

Forums

Menu Border Problem (21 posts)

  1. floydstime
    Member
    Posted 6 months ago #

    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 fourlittleducks.net 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...

  2. CrouchingBruin
    Member
    Posted 6 months ago #

    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:

    #topmenu{
       width:998px;
       border:1px solid #ececec;
       background:#fff;
       height:60px;
       text-align:center;
       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.

  3. floydstime
    Member
    Posted 6 months ago #

    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/fourlittleducks.net/wp-content/themes/zenon-child/admin/options-framework.php) [function.require-once]: failed to open stream: No such file or directory in /home/floydstime/fourlittleducks.net/wp-content/themes/zenon/functions.php on line 459

    Fatal error: require_once() [function.require]: Failed opening required '/home/floydstime/fourlittleducks.net/wp-content/themes/zenon-child/admin/options-framework.php' (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/floydstime/fourlittleducks.net/wp-content/themes/zenon/functions.php on line 459

  4. floydstime
    Member
    Posted 6 months ago #

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

  5. floydstime
    Member
    Posted 6 months ago #

    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?

  6. CrouchingBruin
    Member
    Posted 6 months ago #

    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?

  7. floydstime
    Member
    Posted 6 months ago #

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

  8. CrouchingBruin
    Member
    Posted 6 months ago #

    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.

  9. floydstime
    Member
    Posted 6 months ago #

    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.

  10. CrouchingBruin
    Member
    Posted 6 months ago #

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

  11. CrouchingBruin
    Member
    Posted 6 months ago #

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

  12. floydstime
    Member
    Posted 6 months ago #

    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

  13. floydstime
    Member
    Posted 6 months ago #

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

  14. CrouchingBruin
    Member
    Posted 6 months ago #

    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.

  15. floydstime
    Member
    Posted 6 months ago #

    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!

  16. floydstime
    Member
    Posted 6 months ago #

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

  17. CrouchingBruin
    Member
    Posted 6 months ago #

    #zn_slider {
       overflow: hidden;
       border-radius: 8px;
       -moz-border-radius: 8px;
       -webkit-border-radius: 8px;
    }

    By the way, are you in Hanford? My sister's family lives there. We hit Superior Dairy whenever we take a trip to visit.

  18. floydstime
    Member
    Posted 6 months ago #

    Actually, I live in Post Falls, ID. Although all of my wifes family lives there. We will be heading that way again eventually though. Small world...

  19. floydstime
    Member
    Posted 6 months ago #

    Yeah I put that in, but it didn't work... I tried a couple of different ways, ie with the first css rule, without it. Can't get those corners to love each other...

  20. floydstime
    Member
    Posted 6 months ago #

    closest one so far is

    .slider_wrap{border: 1px solid #824f53; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}

  21. CrouchingBruin
    Member
    Posted 6 months ago #

    Add overflow: hidden; to that rule:

    .slider_wrap{border: 1px solid #824f53; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;overflow: hidden;}

Reply

You must log in to post.

About this Topic

Tags