Pilcrow Nav Bar spacing issues

  • Author
  • #950190

    Hello everyone,

    Please visit my blog and notice how the page “contact” falls to a second line.


    Can anybody tell me the code I need in order to make the letters more narrow or the spacing smaller? Anything to make it so that all the page titles are on one line and evenly spaced and centered along the top.

    Thank you so much!

    The blog I need help with is communityyogalafayette.com.


    The thing is, this is to some extent browser specific (all browsers render slightly differently) and also depends on browser preference settings, so you can never guarantee that the nav is not going to go to two lines.

    Secondly, Pilcrow is what is called a reactive or responsive design. If you grab and resize the width of your browser window you will notice that the theme narrows with your browser window and it has a maximum width setting to keep it from getting too wide. That means that the width of someone’s browser window, or the pixel width of the screen they are viewing it on affects whether the menu will be one line or two.

    The above is sort of the long way of saying that there really isn’t a solid fix for this behavior.

    That said, you can adjust the letter spacing for the menu by adding this and then adjusting the 0.3em letter spacing value.

    #nav a {
    letter-spacing: 0.3em;

    Thank you, thank you!

    Do you think that If I set it to 0.1 or 0.2em that I have a better chance of it usually being on one line for most viewers? Or is this wishful thinking?


    Yes, unless they have their browser set narrow, or if they are on a smart phone or possibly a small tablet. It all depends on the width of the browser window, which is something you cannot control.

The topic ‘Pilcrow Nav Bar spacing issues’ is closed to new replies.