Need help? Check out our Support site, then


Adjusting navigation bar font size

  1. Hi there,
    I have upgraded my theme to enable CSS modification for several things:

    1. One of it is to adjust the size of body text font to a bigger font, and I am happy with that, but as a result, the text size of the navigation bar also getting bigger, which I don't want that to happen.
    How to make this navigation bar gone back to the original size (smaller) with CSS, what is the code as I am not a techie person?
    2. How to adjust the width of the drop-down menu so that the word on the drop down menu will be one line only instead of divided into 2 lines.
    3. Is there a possibility to adjust the margin of the post page? so that I will be able to use "pull-quote" like in the "twenty-fourteen" theme?

    Just for your info, I am not a techie person, so I will need your guide for the changes.

    Thank you.

    The blog I need help with is ninstravelog.wordpress.com.

  2. Hi there,

    Sure thing, I'm happy to help.

    How to make this navigation bar gone back to the original size (smaller) with CSS

    Try the following:

    body.light nav[role="navigation"] {
    font-size: 12px;
    }

    Just adjust the '12' higher or lower until it looks like you want it to.

    How to adjust the width of the drop-down menu so that the word on the drop down menu will be one line only instead of divided into 2 lines.

    Try:

    body.light nav[role="navigation"] .nav li a {
    	width: 100%;
    }

    Is there a possibility to adjust the margin of the post page? so that I will be able to use "pull-quote" like in the "twenty-fourteen" theme?

    Could you link me to an example of what you mean? You can use block quotes in any theme, but how they're styled varies depends on the theme:
    http://en.support.wordpress.com/visual-editor/#row-1

    Your theme also supports "post formats" which includes a Quote format:
    http://en.support.wordpress.com/posts/post-formats/

  3. Hi there, I'm happy to help.

    I'm going to give you a series of code snippets. To use them, just copy them from this thread and then open the customize menu on your blog, click "CSS" on the right-hand menu, and paste the snippets into the box that appears.

    This should reduce the font-size of your menu:

    #menu-photography{
       font-size: 80%;
    }

    This fixes the drop-down menu. Note: I just made it wide enough to accommodate your widest entry. If you have a new sub-page in the future with a longer name, you'll have to re-adjust.

    .sub-menu li{
        min-width: 130px;
    }

    As for your last question, it is possible to adjust the margin of the post page, but I'm not sure I understand the look you are going for. Could you send me a link to a page that includes an example of a "pull-quote" that looks the way you want it to, as well as a page on your current site with a "pull-quote" that doesn't look right?

    Thanks!

  4. @ninqtr sorry to be confusing with the double post. I think both options should work, but you should try @eurello's first as she has a lot more CSS experience than I.

  5. Hi Eurello and Lizthefair,
    Thank you for your help, and as your (LIzthefair) recommendation, I try the first advice first and it works, I am happy now.

    As for the last question, the look that I want is like the sample of 2014: http://twentyfourteendemo.wordpress.com/2013/11/12/featured-images-really-shine/

    I tried to do so in my post: Bahrain 5 years on but didn't work that good.

  6. Thanks for the links, I understand what you are looking for now.

    I played around with it a bit, and wasn't able to find a way to make a quote pulled all the way into the margin look good, but I did add more styling to the right-aligned blockquote that helps it "pop" more.

    See how if you like this better than what you have now.

    blockquote.alignright{
        font-size: 1.5em;
        max-width: 250px;
        font-style:italic;
        background: inherit;
        padding: 15px;
        margin-right: -10px
    }
  7. This should do something similar for left-aligned quotes, but I wasn't able to find one to test on, so if it doesn't work, let me know.

    blockquote.alignleft{
        font-size: 1.5em;
        max-width: 250px;
        font-style:italic;
        background: inherit;
        padding: 15px;
        margin-left: -10px
    }
  8. Hi Lizthefair,

    I tried, it works but not properly, as the rest of the post text will not go to the other side of the line (surrounding the block quote). I've tested it as you can see on my post: http://ninstravelog.wordpress.com/2014/07/11/bahrain-5-years-on/

    I guess that's part of the theme's restriction. Nevermind that, I think I have to focus on writing instead of beautifying my blog... ;-)

    Thank you anyway for your help and effort.
    Nina

  9. One more thing:
    The origian design of the theme is main column maximum width is 628 except in the full-width layout where it’s 960, with around 330 is the space for side bar. In my case, I opted out using side bar and 100% of the space is forthe main column. However, I still need Search Widget.

    When I asked the theme's, author, I could adjust it using css code, as I am not a techie person and not comfortable using css, how do I set the width of my content (main coloumn) and sidebar to 100%, so that the side bar will appear on top of every post (align right) 100% widthand the post will be underneath it also 100% width? what is the code?

    Thanks

  10. I'm sorry to hear the block-quote still isn't doing what you'd hoped. I did take another look and I see the increase in font size I gave you code for isn't "sticking" If you add "!important" to the font-size lines I gave you (see below for an example) you might be happier.

    blockquote.alignleft{
        font-size: 1.5em !important;
        max-width: 250px;
        font-style:italic
        padding: 15px;
        margin-left: -10px
    }
    blockquote.alignright{
        font-size: 1.5em !important;
        max-width: 250px;
        font-style:italic;
        padding: 15px;
        margin-right: -10px
    }

    I see the quote surrounded by text on three sides (like an image would be) so I'm not sure what you mean by "the rest of the post text will not go to the other side of the line " I'm happy to try again if you can explain, it a different way. I'm also happy to let it go as you suggested.

    I also noticed you removed the WordPress info in your footer, you'll need to add that back. You can keep your copyright information as well, you just need to have both:

    More details: http://en.support.wordpress.com/custom-design/#frequently-asked-questions

    May I remove the Admin Bar, credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?

    All WordPress.com bloggers are required to maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in) as well as credit links in the footer, even our VIP bloggers. Please do not hide or alter text or links for the footer credits or the toolbar. Modifying the style of the footer text (i.e. colors and font size) is fine as long as it’s still readable. Using CSS, you can also add content like a copyright notice to the existing footer. If you would like to do that, you can ask in the CSS Customization forum and Staff or our community volunteers would be happy to help you do that.

    As for the search bar, that's beyond my CSS skills, so I'll let @eurello or one of the other happiness engineers take care of that one.

  11. As of the pull block quote: actually I purposely make it smaller, so it will not dominate too much of space only for the pull-quote.
    What I meant by "post text will not go to the other side of the line (surrounding the block quote)" is similar to if you put an image at "align left" then on the right side of it is the blog text (not the image's caption) as part of the rest of the blog text.

    As of for your observation that I removed the WordPress info in your footer, the truth is I did not do that, if you look at it carefully, the font colour is as white as the background colour, I don't how did it happen, as I want it with the same colour as the line above it.

    I manage to change the image caption's colour, but obviously I did not manage to change the "category" and "tag" word at the end of each blog post as well as those WordPress.com info. I think that happened because I removed the pattern of the background of the original theme

  12. What I meant by "post text will not go to the other side of the line (surrounding the block quote)" is similar to if you put an image at "align left" then on the right side of it is the blog text (not the image's caption) as part of the rest of the blog text.

    I see. I was confused because I was looking at the quote close to the top of the page that is behaving correctly. I see now that the post at the bottom of the page is displaying differently.

    Part of the problem might just be that the bottom quote is very close to a full-size photo and so there isn't really enough text between the photo and the quote for the text to wrap. If you just move the quote, that might help.

    I also noticed that the quote at the top that is working correctly has a class associated with it-- "alignright". The quote on the bottom of the page is not associated with the "alignleft" class which could also be in play.

    Unfortunately, I don't know how to fix any of that without getting into the backend of your site. So, I think we need to wait for @eurello as she has more options to help than I.

  13. OK, thank you...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.