Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Pilcrow Theme - How to make my nav bar "icons" skinnier?

  1. holleymaher
    Member

    Hi there,

    I get that I'm posting about 3 questions a week at this point, but they just keep coming up!

    So here's what I'm trying to fix now-- Blog in question: http://www.holleymaher.com

    I've added another page to my nav bar/menu ("Shows") but I'd like for it to appear on the same line as the others. There's no more room in the nav bar, so it got pushed down to the second line. In the CSS edit, is there a way to make those items in my nav bar "skinnier" so that I can fit more up there?

    The thing that's really tripping me up is this: I'm currently working on two blogs, the one I mentioned above, and http://www.healthyandhappyhour.com. They both use the Pilcrow theme. However, with H&H Hour, the CSS looks different. If I wanted to make a change to my nav bar, the appropriate coding would be listed under "nav." There are no "nav" sections in the holleymaher.com CSS, however, only "menu." Just out of curiosity, why would these two CSS codes read so differently? Since they're the same theme, I would expect them to be identical, except for any changes I've made.

    Thanks!

    The blog I need help with is holleymaher.wordpress.com.

  2. devblog
    Member

    To fix your nav bar, add this to your CSS code:

    .menu-header {overflow: hidden;}

.menu-header ul li a {
padding-left: 10px !important;
padding-right: 10px !important;
}

    Regarding your questions, both blogs do have the same HTML elements (they should since they share the same source files), and they both should have the same CSS also, unless wp.com is doing something behind the scenes...

    If you don't see them in your CSS Editor, it's probably because you didn't need to use them? This is why is very important to just have your changes/additions to your theme's CSS in the editor.... it makes it easier to keep track of your modifications and not get confused with why some selectors are in one code and not the other...

    HTH

  3. holleymaher
    Member

    Right! It makes total sense only to include the changes. I fear I'm in over my head with these two blogs at this point, tho. It may be too late to fix all of that. But I'll definitely do that with future blogs, for sure. Still no idea why the CSS is different! Pretty odd. But thanks!

  4. holleymaher
    Member

    I know this is a different question altogether, but I've started about 6 new posts on here in the last couple of weeks and I just can't bring myself to do it again. Maybe you can help me out.

    Ok, on http://www.holleymaher.com :

    See the big spaces between "available now," "buy on itunes" and "buy a physical cd" in the sidebar? I'd like to find a way to make those spaces smaller. It seems like, by default, the space between items in the sidebar is really huge. Like, the spaces between all the links (facebook, myspace, etc) and the spaces between the show dates beneath "upcoming shows."

    None of these use the "Image" widget. They're all text, and coded using html. There are no "
    </br>"s between any of these things, I've taken them all out. But the giant space is still there.

    Is this something that can be fixed in CSS?

    THANKS!
    H

  5. devblog
    Member

    This should fix the spaces issue:

    .xoxo .textwidget a img {margin: 0;}

    The "available now" image links to a non existing page.

    BTW, the code I gave you above (that fixes the menu bar) makes your menu look good in Firefox too. I'm guessing you're using either Chrome or Safari? With the values you used (14px), the menu looks good in those browser; however in Firefox the "Contact" button is still pushed down to the second line. Just letting you know.

    --

  6. holleymaher
    Member

    Cool, thanks :)

    I copied that code into the bottom of the style sheet. It solved the problem between the "buy on itunes" and "buy a physical cd" buttons but the show dates are still pretty far apart.

    Also, changed that 14px back to 10. Is there any way for me to center the nav bar rather than it being flush left? The reason why I made them wider was because I didn't like that big gap on the right side of the nav bar.

  7. holleymaher
    Member

    Nevermind, figured out the sidebar spacing issues! Would still love help with centering the nav bar :)

  8. devblog
    Member

    A small observation: it seems you copied some CSS code from another theme... I found some "menu-main" selectors, and there are no elements in the markup that have such class or id attribute values. I'd recommend you to remove all those selectors that start with "menu-main" since they're just taking up space.

    Now, replace the code I previously gave you:

    .menu-header {overflow: hidden;}

.menu-header ul li a {
padding-left: 10px !important;
padding-right: 10px !important;
}

    with this one:

    .menu-header .menu li a {
padding: 0 14px !important;
letter-spacing: 3px !important;
}

.menu-header .menu .sub-menu ul{margin-left: -5px !important;}

    Because of the way the original CSS was coded, it was a real pain in the butt to get this to look the same in these browsers (on a Mac):

    - Camino 2.0.7
    - Safari 5.0.4
    - Opera 9.27
    - Firefox 3.6.16
    - Google Chrome 10.0.648.205

    The right side of the contact button doesn't touch the right margin of the blog for like 3 pixels... it's not ideal but that's the closest to the margin I could code it without pushing the Contact button to the second line.

    HTH

  9. holleymaher
    Member

    THANK YOU!!! Man. You're awesome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags