Want to put a box around the menu bar, make menu text bigger. I'm using 20-14.

  • Unknown's avatar
    dmoss5211 · Member ·

    I’m using the TWENTY FOURTEEN theme and any CSS help would be appreciated. I would like to make my menu text bigger and change the font. Also I would like to put a box or some kind of flair around the menu area to separate it from the header and the rest of the blog.

    Alternatively if possible, is it possible to use CSS to create or embed picture icons (with or without text next to the picture) instead of text for my menu options, that would be great if I could get some assistance with that as well.

    Thanks in advance! I am a certified CSS noob.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    dmoss5211 · Member ·

    Oh I forgot! I would also like to make the WordPress subscribe button bigger! How can I do that?

  • kathrynwp · Staff ·

    I would like to make my menu text bigger and change the font.

    I think this is about as big as you can go without pushing the menu onto the second line:

    .primary-navigation a {
  font-size: 120%;
}

    If you use this instead of the CSS above you’ll get a serif font like Georgia, or Times if the viewer doesn’t have Georgia:

    .primary-navigation a {
  font-size: 105%;
 font-family: Georgia, Times, serif;
}

    I had to make the size smaller to keep it all on one line, but if you don’t mind it going onto another line, you can make it bigger.

    Whatever fonts you choose should be ones that are commonly installed on most computers (like Verdana or Helvetica, for example), otherwise your viewers will see their browser’s default font.

  • kathrynwp · Staff ·

    Also I would like to put a box or some kind of flair around the menu area to separate it from the header and the rest of the blog.

    I’m not quite sure what you’re visualizing, but this will give you a 4-pixel border around the top menu area: 

    .menu-custom-menu-container {
  border: 4px solid #bb00bb;
}

    The purple colour is just an example to make the border stand out – replace that with whatever colour you like.

    If this isn’t what you had in mind, perhaps you could sketch out a quick mockup so I can take a look?

  • kathrynwp · Staff ·

    I would also like to make the WordPress subscribe button bigger! How can I do that?

    It isn’t possible to change the size of the Follow widget that you’re using with CSS, due to the way it’s coded using something called an iframe, but you could try using the other Follow widget instead – it’s a bit bigger and more noticeable:

    https://en.support.wordpress.com/widgets/follow-blog-widget/

  • Unknown's avatar
    dmoss5211 · Member ·

    This was perfect! Thank you so much! I can just leave the subscribe button the way it is.

  • kathrynwp · Staff ·

    You’re very welcome!

  • The topic ‘Want to put a box around the menu bar, make menu text bigger. I'm using 20-14.’ is closed to new replies.