How to increase menu font size in Nishita?

  • Author
    Posts
  • #1691091

    bethwade
    Member

    I’d like to increase the menu font size slightly so that it is in balance with the post title font size. Can someone provide the CSS code for me to change this? Thank you so much!
    Beth

    The blog I need help with is bethwadephotography.com.

    #1691181

    bethwade
    Member

    also, I tried to center my menu with this code:
    .layout-photoblog div.menu {
    text-align: center;
    }
    .layout-photoblog #nav,
    .layout-photoblog div.menu ul {
    display: inline-block;
    width: inherit;
    overflow: hidden;
    }

    which works, BUT then my drop down pages dont show up. how can i center and also show the drop down pages?

    #1691223

    Hi Beth, I see you found the CSS for changing the font size in the menu. To center the menu, add the following.

    .layout-photoblog div.menu ul {
        margin-left: auto;
        margin-right: auto;
        width: 700px;
    }

    If you increase the number of top level menu items, you may have to increase the width value. Normally there is an easier way to do this, but the menu HTML and CSS in this theme is done differently.

    #1691228

    bethwade
    Member

    oh perfect! thats exactly what I needed!

    I actually didn’t find the css for increasing the font size in the menu…I’d like to make it just a bit larger. do you happen to know?

    many thanks!!

    #1691253

    Ah, sorry, I thought I had seen the following in your custom CSS. Add this and adjust as desired.

    .wf-active #nav, .wf-active div.menu ul {
        font-size: 13px;
    }

    And, you are welcome.

    #1691266

    bethwade
    Member

    Great!! I’m trying to find one more thing but don’t see a thread already posted for this…how can I increase the space between lines of my content paragraphs? I figured out how to change my font but would like to have each line of text less squished together. TY again!

    #1691269

    To adjust the line height, add the following and adjust as desired. This adjust the line height within paragraphs only.

    p {
        line-height: 18px;
    }
    #1691270

    You know what, add the following instead, which is exactly what is in the original CSS and adjust. This way it will catch other things as well.

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, dialog, embed, figcaption, figure, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        line-height: 18px;
    }
    #1691274

    bethwade
    Member

    perfect, thank you again!!

    #1691275

    You are welcome.

    #1691344

    bethwade
    Member

    Wondering if I can ask one other thing!

    I want my font to all be Helvetica Light and right now the font on my posts is larger than on my pages…how can I make this consistent across the entire site?

    Thanks so much!!

    #1691345

    right now the font on my posts is larger than on my pages…

    I reviewed your site and checked your latest post:
    http://bethwadephotography.com/2014/03/25/my-sweet-boy-turned-3-week-1-of-souls-imagined-you-lake-wylie-sc-child-photographer/

    I found that you have setup font sizes in the post itself either when you created it or when you edited it. To make it consistent with the rest of the site, you shouldn’t set font sizes using the editor because those will override what you set in your custom CSS.

    To fix the problem, you can open the post for editing in your dashboard, click the last icon on the right at the top of the editor to get a 2nd row of buttons, then highlight all the text and click the “Clear formatting” button (it looks like a little eraser), then re-save the post.

    Once that’s done, you can setup the font size you want in your CSS and it will start working on the post.

    #1691348

    bethwade
    Member

    Hmm, I actually would like the font in my pages to be the size of my post font.

    #1691349

    To make fonts consistent across the site (which is how I read your last question), you can use CSS, and I was recommending taking out the per-post formatting because I think that would make custom CSS apply consistently to both posts and pages.

    Let’s look at your CSS first instead though, because I think it will help make it a bit more clear for you once you see the CSS change go through.

    Go to your Appearance > Customize > CSS editor and find this in your custom CSS:

    body {
    	font-family: "Helvetica Neue";
    	font-weight:lighter;
    	font-size:20px
    }

    That rule isn’t actually being applied because there are custom font selections in the Appearance > Customize > Fonts panel. Change “body” in the CSS above to “.wf-active body, body” so that the final CSS looks like this:

    .wf-active body {
    	font-family: "Helvetica Neue";
    	font-weight: lighter;
    	font-size: 20px;
    }

    That will make it so the rules for “Helvetica Neue”, lighter font weight, and 20px actually get applied to pages like this one:
    http://bethwadephotography.com/my-photography-style/

    However, some of the changes (like the 20px size) still won’t apply to the text inside posts like this one because there is formatting inside that post that specifically sets the font to 16.52px:
    http://bethwadephotography.com/2014/03/25/my-sweet-boy-turned-3-week-1-of-souls-imagined-you-lake-wylie-sc-child-photographer/

    If you want to change the font size to something other than 16.52px, you need to edit the post and remove the individual formatting you added inside just that post when you edited it. Or, if you like the 16.52px font size that is currently setup in that post, then you could change 20px to 16.52px instead and then everything would match.

    #1691350

    bethwade
    Member

    Awesome, thank you!!

    I just posted another thread but not sure anyone saw it…about my dropdown menu not linking on my iPad. Any ideas why that is the case? I’ve tried other websites and it works fine, but mine won’t link to any of the drop menus (for ex my “portfolio” genre landing pages).

    Is this something in my CSS too?

    Thanks again!!

    #1691351

The topic ‘How to increase menu font size in Nishita?’ is closed to new replies.