Getting the categories names closer together

  • Unknown's avatar
    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: (visible only to logged in users)

  • Unknown's avatar
    darrellschulte · Member ·

    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;
}
  • Unknown's avatar
    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.

  • Unknown's avatar
    darrellschulte · Member ·

    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;
}
  • Unknown's avatar
    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.

  • Unknown's avatar
    darrellschulte · Member ·

    What’s the URL of that drop cap query?

  • Unknown's avatar
    cfournier224 · Member ·

    oh sorry – I forgot to include it!
    Here you go:
    https://premium-themes.forums.wordpress.com/topic/hive-adding-a-drop-cap-to-my-posts?replies=2#post-78060

  • Unknown's avatar
    darrellschulte · Member ·

    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.

  • Unknown's avatar
    darrellschulte · Member ·

    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>

  • Unknown's avatar
    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.

  • Unknown's avatar
    darrellschulte · Member ·

    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.

  • Unknown's avatar
    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.

  • Unknown's avatar
    darrellschulte · Member ·

    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.

  • Unknown's avatar
    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.

  • Unknown's avatar
    darrellschulte · Member ·

    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.