Larger font-size for first letter of each menu-bar item

pending (13 posts) (2 voices)

  1. farnell
    Member

    I would like the first letter of each of my menu items to be upper-case. Is there a way to do this using something like .jqueryslidemenu a span:first-letter{font-size: 16px;} ?

    Also, is there a way to make the menu bar have a smaller height?

    My site is at http://cedartreeschool.org/newsite/

    Thank you.

    Posted 2 years ago #
  2. Elliott
    Support

    Hello farnell,

    Add this to your custom CSS.

    #primary_menu a { text-transform: capitalize !important; }
    #primary_menu { height: 90px !important; }
    Posted 2 years ago #
  3. farnell
    Member

    Thank you! Oh, sorry, I wasn't very clear in my first question.

    Right now, all of my menu items are all-capitals. What I would like is for each menu item to have a larger font for the first letter.

    Also, I want the menu bar to have a *smaller* height, not taller.

    Thank you!

    Posted 2 years ago #
  4. Elliott
    Support

    Hmm, I think that CSS should be working. Did you add it to your custom CSS field?

    Posted 2 years ago #
  5. farnell
    Member

    Yes, I tried that CSS. That made the menu bar taller in height, and it capitalized the first letter. What I want is for the menu bar to be shorter in height, and the first letter of each word to be a larger font.

    For example, see the menu bar on our old site. Notice how the first letter of each menu item is a larger font: http://cedartreeschool.org/

    Posted 2 years ago #
  6. Elliott
    Support

    Try this.

    #primary_menu a::first-letter { font-size: 20px !important; }
    #primary_menu { height: 30px !important; }
    Posted 2 years ago #
  7. farnell
    Member

    Thank you. That did make the first letter larger, but it threw off the menu spacing (I think it added a margin?) in FireFox. See this screen shot: https://www.dropbox.com/s/npdp2yvoz75pite/Image7.png?dl=0

    Also, the menubar background is shorter, but the the text is not lining up right?

    Posted 2 years ago #
  8. farnell
    Member

    Any ideas after that screenshot?

    Posted 2 years ago #
  9. farnell
    Member

    I figured out how to change the height of the menu. Here is what I used:

    /*menu bar smaller height*/
    .jqueryslidemenu li a {
    height: 35px;
    line-height: 38px;
    }
    #primary_menu {
    height: 35px;
    }

    Any ideas for making the first letter larger, without throwing off the menu padding, etc?

    Posted 2 years ago #
  10. Elliott
    Support

    Add this back in.

    #primary_menu a::first-letter { font-size: 20px !important; }

    When I add it in the browser it looks fine to me. The links stay on one line.

    Posted 2 years ago #
  11. farnell
    Member

    Can you take a look at this screenshot? This is in FireFox: https://www.dropbox.com/s/npdp2yvoz75pite/Image7.png?dl=0

    Posted 2 years ago #
  12. Elliott
    Support

    Did you clear your browser cache? This is what I'm seeing.

    Attachments

    1. Untitled.jpg (48.7 KB, 0 downloads) 2 years old
    Posted 2 years ago #
  13. farnell
    Member

    Thank you for your work on this. I am reloading the page each time, and when I change the CSS, the line breaks as shown. Perhaps we have different versions of Firefox. Anyway, I think my client has settled with not having the larger first-letters. Thank you!

    Posted 2 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme