re sizing help with navigation bar border

  • Unknown's avatar
    hobnobnoor · Member ·

    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: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    Define “re size” / “right way” / “normal”.

  • Unknown's avatar
    hobnobnoor · Member ·

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

  • Unknown's avatar
    justpi · Member ·

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

  • Unknown's avatar
    hobnobnoor · Member ·

    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.

  • Unknown's avatar
    hobnobnoor · Member ·

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

  • Unknown's avatar
    justpi · Member ·

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

  • Unknown's avatar
    hobnobnoor · Member ·

    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?

  • Unknown's avatar
    hobnobnoor · Member ·

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

  • Unknown's avatar
    justpi · Member ·

    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;)

  • Unknown's avatar
    justpi · Member ·

    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;
}
  • Unknown's avatar
    hobnobnoor · Member ·

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

  • Unknown's avatar
    justpi · Member ·

    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;
}
  • Unknown's avatar
    hobnobnoor · Member ·

    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?

  • Unknown's avatar
    justpi · Member ·

    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!

  • Unknown's avatar
    hobnobnoor · Member ·

    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

  • The topic ‘re sizing help with navigation bar border’ is closed to new replies.