Need help? Check out our Support site, then


re sizing help with navigation bar border

  1. My main navigation bar has a dashed border but it doesn't really fit well with the header and site size can you help me re size the border in the right way so it looks normal

    the command i used in css for the desired border is:
    .navigation-main, .navigation-main a, #social-networks a {
    color: rgb(245, 138, 67);
    border-style:dashed;
    border-color:rgb(0, 185, 185)

    please help :(

    The blog I need help with is letstrycreating.com.

  2. Define "re size" / "right way" / "normal".

  3. lol ...sorry too many words for one simple confusion...i want the border to look the right way ..!

  4. I cannot know what "the right way" is to you. Thinner? not dashed? both? other? Please be precise when asking such questions!

  5. The border around the navigation bar should align with the header image, mine is not- so how can I align it right?

    hope you understood what I am asking for.

  6. to be more precise with the above question - right side of the navigation bar doesn't seem to have and end like closing side.

  7. Oh I see - hadn't noticed that!

    You've added this:

    .navigation-main {
        margin-left: 5%;
        width: 100%;
    }

    One way to correct the menu is turn the width to 89%. (The other way would be to center it, but that's more complicated.)

    By the way, you need to tidy up your additions, because you've got several conflicting or overlapping ones (I'm seeing eight different additions involving ".navigation-main").

  8. Cool worked Thanks again :)

    about the additions in CSS right?

    I know I hate that too its so messy but I am afraid to delete anything there what if i screw up!!!

    any suggestions?

  9. I have changed the width to 89% for the navigation bar border but how to center my menu's now?

  10. a) Well, you could at least remove the conflicting or redundant codes.
    For example, you've got these two (and the first one overrides the second):

    .wf-active .navigation-main a {
        font-size: 15px;
    }
    .wf-active .navigation-main a {
        font-size: 12.56px;
    }

    Which one should it be? If you want it 12, delete the other code; if you want it 15, delete both of them because 15 is what the original stylesheet of the theme already has.

    Or you've got these two:

    .navigation-main, .navigation-main a, #social-networks a {
        border-color: #00B9B9;
        border-style: dashed;
        color: #F58A43;
    }
    .navigation-main, .navigation-main a, #social-networks a {
        color: #F58A43;
    }

    The second one is obviously superfluous. And so are these two (at least for the three of the five selectors:

    .navigation-main, .navigation-main a, .post-date .entry-day, .sticky .entry-title:before, #social-networks a {
        color: #F58A43;
    }
    .navigation-main, .navigation-main a, .post-date .entry-day, .sticky .entry-title:before, #social-networks a {
        color: #FFE664;
    }

    Also, the codes that apply to the same element should be combined into one. For example, these:

    .widget {
        margin-bottom: 0.018em;
        padding-top: 0.018em;
    }
    .widget {
        color: #00B9B9;
    }
    .widget {
        color: #F84B1F;
    }
    .widget {
        background-image: none;
        color: #FFB991;
    }

    should be:

    .widget {
        background-image: none;
        color: #00B9B9;
        margin-bottom: 0.018em;
        padding-top: 0.018em;
    }

    By the way, 0.0018em? Might as well be nothing! (margin-bottom: 0; padding-top: 0;)

  11. b) You mean center the menu items. This way:

    #site-navigation .menu-main-container, #site-navigation .menu {
        margin-left: 0;
    }
    .navigation-main ul {
        text-align: center;
    }
    .navigation-main li {
        display: inline-block;
        float: none;
    }
  12. You got me.....bingo !

    Thank you for the CSS additions ...now I am going to get busy cleaning up the over riding one's ...
    meanwhile do you know (pink double line) what are those line bars dividing the two posts like I have in all my posts called? is it paragraph dividers..?

  13. By the way 2, turning the footer bg to transparent made the footer credits invisible, and that's against the WP ToS. You should add this (and replace 456789 with the hex for the color you prefer):

    .site-info, .site-info a {
        color: #456789 !important;
    }
  14. hi justpi,

    1.Do have any clue how to make my own "grab my button" for linking parties purpose?

    2. I am unable to align center widget number 9, what is the right command is it #text 5 align center?

  15. 1. See here:
    http://onecoolsitebloggingtips.com/2010/04/16/grab-my-button-code-generator-and-tutorials/

    2. You mean the image widget? If so, you don't need any extra CSS: you go to Appearance > widgets, open that widget, set the alignment to center, save.

    PS You didn't correct the footer credits!

  16. 1. Thank you for the link...working on it :)
    2. widget 9 aligned thank you.

    PS: I so want to correct the footer credits asap in CSS but its time consuming checking each and every command as you mentioned previously the examples of the over riding commands...I will definitely need good free time to sit and correct them so hopefully this weekend I intend to correct it....I wish my css skills were as good as you then definitely I wouldn't be making excuses as such *wink*

    xx tc

Topic Closed

This topic has been closed to new replies.

About this Topic