Horizontal Menu and Post Title Position

  • Author
    Posts
  • #1378371

    nathanwyss
    Member

    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.

    #1378474

    timethief
    Member

    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?

    #1378475

    nathanwyss
    Member

    I’m using the Hatch theme.

    #1378477

    timethief
    Member

    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

    #1378483

    nathanwyss
    Member

    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.

    #1378485

    timethief
    Member

    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.

    #1378564

    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.

    #1378676

    nathanwyss
    Member

    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.

    #1378679

    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;
    }
    #1378682

    nathanwyss
    Member

    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.

    #1378687

    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;
    }
    #1378692

    nathanwyss
    Member

    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.

    #1378693

    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;
    }
    #1378702

    nathanwyss
    Member

    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?

    #1378706

    @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.