Horizontal Menu and Post Title Position

  • Author
  • #1378371


    I’d like to have my menu text horizontal instead of vertical. Also looking to have my posting titles appear to the right of the post image rather than underneath. All help is appreciated.

    The blog I need help with is nathanwyss.com.



    All CSS editing is theme specific and many themes have been CSS edited. Searching the tags under the theme name may provide an answer for you. What is name of the theme you are using please?



    I’m using the Hatch theme.



    Here’s the tag so you can search the Hatch threads and see if your question has been asked and answered previously. https://en.forums.wordpress.com/tags/hatch



    I did not find how to do this. I’d also like to remove the words MENU and Skip To Content. They seem to be built into the theme.



    Hi again,
    I don’t help with CSS Editing. It’s a long weekend so please be patient while waiting for those who do to login and assist you.


    Hi there @nathanwyss,

    I’d like to have my menu text horizontal instead of vertical.

    Give this a try:

    .menu ul li {
        display: inline-block;
        padding: 0 20px;

    You can adjust the spacing between the menu items by changing the “20px” value in the “padding” property of the CSS rule.

    I’d also like to remove the words MENU and Skip To Content.

    This might do it:

    .assistive-text {
        height: 1px;
        left: -1000px;
        overflow: hidden;
        position: absolute;
        width: 1px;

    Skip links are internal links that help users navigate to different parts of a page, originally intended as a navigation aid for people with disabilities (but also very useful to mobile phone users). Usually, we use “display: none” for hiding HTML elements from a page. However, this technique makes content inaccessible to screen readers. Because of that, I’m using a absolute positioning technique to display the assistive content off-screen, so that it is hidden from sighted users, but still visible to screen readers.



    Wow @fabianapsimoes, that was a huge help. It’s amazing that you or anyone else knows how to do that.

    Do you have any ideas on how I can get my blog post titles to appear to the right of the corresponding image?

    Do you know how I can get my navigation menu to be centered on my page like the word “Photography” is? How I can make the font larger and bold?

    I really appreciate the help.


    For the post titles on the main page, the following will (I think) get you what you want. [Hatch] is a responsive theme design, the titles would still flow down below the images if the browser window was narrowed. To prevent that, I’ve set a static width for #page at 1000px.

    .entry-header {
    float: right;
    max-width: 55%;
    padding-left: 20px;
    #page {
    width: 1000px;

    This will center the menu items for you.

    .main-navigation {
    text-align: center;
    .menu ul {
    padding-left: 0;


    That was perfect. I used 1050px but otherwise perfect. THANK YOU!

    Do you know how I can bring my navigation menu a little closer to the Photography title? And how I can put the text in bold? I try but none of my commands work.

    Do you know how I can get rid of the list of tags that appears on every post? I want to keep the tags, but make them invisible.


    You are welcome.

    To move the menu up closer to Photography, add the following and adjust the top padding value (it was 40px).

    .menu ul li {
    padding-top: 20px;

    And for the tags, this will remove them for you.

    .single .tags-links {
    display: none;


    The site is looking much better thanks to your help. I have only two more questions (for now)….

    How do I make the text in the navigation menu bold?

    In the posts, how do I bring the date and author information closer the the title of the post? I’m thinking “padding-top” is the command but I don’t know what this information is called.

    Thanks again. I’m learning a lot from this.


    You are welcome and your site is looking very good. I love the colors and background (and the photos). CSS is fun, isn’t it?

    For the navigation text, add the following. I increased the letter spacing just a bit since the letters were a little tight in some browsers when I made it bold.

    .main-navigation a {
    font-weight: bold;
    letter-spacing: 0.05em;

    There is bottom margin on the post titles. Add the following and then adjust the 20px value as desired.

    .entry-title {
    margin-bottom: 20px;


    Thanks for the kind words and all the help. Those fixes worked great. I’m having trouble making changes to the main title of my page because anything I do to it also happens to the titles of my individual blog posts. How do I start a line of code so that it only effects the NathanWyss.com part of my page and not the blog entry titles?


    @nathanwyss, you can target the site title specifically with the following selectors and then add whatever declarations you desire to it.

    .site-title, .site-title a

The topic ‘Horizontal Menu and Post Title Position’ is closed to new replies.