Getting the categories names closer together

  • Author
    Posts
  • #2427007

    cfournier224
    Member

    Hi!

    How can I get the categories in the main menu to be closer together? (valiant leadership, teaming, up!, etc…) The box that appears when you hover over the name also needs to move with them.

    I guess I would need to reduce the box-sizing, but I can’t seem to figure out the CSS code for it!

    Much appreciated!
    C.

    The blog I need help with is theleader.ca.

    #2427119

    Hello C,

    I think reducing the font size for the menu would be an option. Have a look!

    ul#menu-top-level-info.nav.nav--main.hover-intent {
        font-size: 14px;
    }
    #2427125

    cfournier224
    Member

    Hey there!

    I don’t want the font to be smaller, but I do see that there is a lot of extra, empty space around the words, which is pushing things out. When I add more categories, they won’t fit onto a single line. I want to reduce the spacing around the words….

    Can you help with that?
    Merci!

    C.

    #2427140

    I guess I was taking the easy way out. Reducing the padding on those elements should handle it without messing with the font size at all.

    .nav--main > li > a {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }
    #2427228

    cfournier224
    Member

    It’s perfect! Yay!

    Tell me, do you know about drop caps? I have another query submitted but the answer I got wasn’t quite what I needed.

    I’d like to be able to manually add drop caps by using shortcode in the post text itself. Is that possible? Or do I need a plugin of some sort?

    Just incase you have a quick and easy answer for me:)
    C.

    #2427232

    What’s the URL of that drop cap query?

    #2427237

    cfournier224
    Member
    #2427242

    What George is suggesting is that you use the Text Editor and alter the HTML to include a span that will trigger the drop cap.

    http://theleader.ca/2015/07/13/employee-conflicts/

    For instance, in this paragraph, you would change:

    <p>Understanding what’s needed and having the ability to execute it are two different things. There’s simply no toolkit available to help rewire personalities or control people’s actions. However, good leadership infers getting people to take your suggestions and apply your decisions. Therefore, it’s up to you to set guidelines to which your team should adhere. Here are 7 steps to get there:</p>

    <p><strong><span class="dropcap">U</span><strong>nderstanding what’s needed and having the ability to execute it are two different things. There’s simply no toolkit available to help rewire personalities or control people’s actions. However, good leadership infers getting people to take your suggestions and apply your decisions. Therefore, it’s up to you to set guidelines to which your team should adhere. Here are 7 steps to get there:</p>

    In theory, it should do the drop cap and style the letter in bold. I can’t test it, but please give it a try.

    #2427243

    Correction.

    <p><strong><span class="dropcap">U</span></strong>nderstanding what’s needed and having the ability to execute it are two different things. There’s simply no toolkit available to help rewire personalities or control people’s actions. However, good leadership infers getting people to take your suggestions and apply your decisions. Therefore, it’s up to you to set guidelines to which your team should adhere. Here are 7 steps to get there:</p>

    #2427248

    cfournier224
    Member

    it works! Is there a way to specify to drop the cap over 2 lines instead of 3, like it’s doing right now?
    C.

    #2427251

    You would need to fiddle with this:

    .dropcap {
        float: left;
        font-size: 5.125em;
        font-weight: bold;
        line-height: 1.02439;
        line-height: 1;
        margin-bottom: -0.14634em;
        margin-right: 0.07317em;
        margin-top: -0.1em;
    }

    and it looks as if you don’t need that emphasis I provided either.

    <span class="dropcap">U</span>

    That is probably sufficient.

    #2427255

    cfournier224
    Member

    ok so wait, to be clear, I add this to the text editor? It’s just bcs I don’t want to drop cap systematically (so not in the CSS), but rather chose when and where to use it…
    C.

    #2427256

    The .dropcap is already in the CSS (I pasted exactly what is there) and adjusting it via Custom CSS as it is now, would impact the display throughout the site, however, I suspect the span dropcap class is not in play unless you have made it so on your site.

    #2427258

    cfournier224
    Member

    ok, I see. It’s just that I want to use it manually in the text editor, not site-wise, so I need the shortcode. Lmk if there’s a way to adjust the line height using that short code; otherwise, I’ll just use it as is and it will do the trick!

    Merci,
    C.

    #2427261

    If you wanted to experiment, you could always add this to your CSS:

    .bigdropcap {
        float: left;
        font-size: 7em;
        font-weight: bold;
        line-height: 1;
        margin-bottom: -0.14634em;
        margin-right: 0.07317em;
        margin-top: -0.1em;
        color: #171617;
        font-family: "Playfair Display", serif;
        font-weight: normal;
    }

    and then use this new class in your post.

    <span class="bigdropcap"></span>

    Note: That isn’t a shortcode.

The topic ‘Getting the categories names closer together’ is closed to new replies.