How to apply nowrap command to link navigation labels?

  • Unknown's avatar
    feedingtheneed · Member ·

    Hi there!

    My blog (http://feedingtheneed.wordpress.com/) is using the Chateau theme. The link navigation label (which I want to use to show my blog titles) that appears when you hover over the categories gets text-wrapped after about 18 characters. Is there any way to use the nowrap command to stop these blog titles from getting text-wrapped?

    To see what I mean, if you hover your mouse pointer over the category “Information Dispensory” at the top left corner of the blog, you will see the link navigation label appear below. It should read “FEBO! THIS ARTICLE WAS PUBLISHED 6-6-14.” You’ll see that it is text-wrapped. I’d like to either increase the number of characters before the text gets wrapped (widen the column) or eliminate the wrapping completely.

    Please help! Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, widening the submenu to 300px will make the title you have now a single line. It was originally 140px. You can adjust as desired, but in my opinion I would probably suggest perhaps 250px and let the titles go to two lines if they need to.

    #menu ul ul {
width: 300px;
}
  • Unknown's avatar
    feedingtheneed · Member ·

    That is AWESOME!!! Thank you SO MUCH!

    Do you happen to know how to widen the menu title “columns?” I see I can create a longer name for the navigation labels (as I’ve done for one of them) to force that to happen, but what I really want to do is set the width of these “columns” to a certain size without having to create longer names for each navigation label. Is this possible?

    Thanks again!

  • Unknown's avatar
    designsimply · Member ·

    Do you happen to know how to widen the menu title “columns?”

    Do you mean the top-level menu items such as “Welcome to the Information Dispensary” ?

    If so, one way to widen them and still keep the drop-down submenus line up well would be to add padding to the right of each top-level link. Here is an example you can try out:

    #menu > ul > li > a {
	padding-right: 40px;
}

    Adjust the 40px value as needed.

  • Unknown's avatar
    feedingtheneed · Member ·

    This seems to have added padding to the center “column” only…the one called “Personally Speaking.” Is there a way to add a different amount of padding to each of the three “columns?” If so, that would be EXACTLY the solution I need!

    Thanks so much for your help! =)

  • Unknown's avatar
    designsimply · Member ·

    Nope, it added right padding to all three. To get a better idea on how it works, try adding this to your Appearance > Customize > CSS editor without saving:

    #menu > ul > li > a {
	border: 1px dashed red;
}

    While that is in place, remove the 40px, then look at what changed, then add back something big like 100px, then look at what changed.

    Does that help you see what’s happening more clearly?

    Aside: you could also add a padding-left line in addition to the padding-right line, but I think it would make the drop-down menus look funny.

  • Unknown's avatar
    feedingtheneed · Member ·

    Ahhh..I see how that works. Thanks! What I was looking at was the white space in the submenu in the center column.

    Is there a way to add a different amount of padding to each of the three “columns?” Or can I only add a specific amount to all columns? I’m also now wondering if I can assign a different width to each of the three submenu columns??

    Thanks again for your help!

  • Unknown's avatar
    designsimply · Member ·

    Is there a way to add a different amount of padding to each of the three “columns?”

    There is! Each menu item in a WordPress.com theme has a unique identifier. The ID value for an element (it’s unique identifier) can be found by looking at the page source. You can use browser tools to find them. Let me show you how to do it:

    If you copy the CSS from that example, you can use it to make CSS changes to that first menu item only. You can use the same technique to find the ID values for the other menu elements or any others you add in the future.

  • Unknown's avatar
    designsimply · Member ·

    I’m also now wondering if I can assign a different width to each of the three submenu columns??

    You could indeed. Here’s an example that will target the first submenu:

    #menu #menu-item-199 ul {
	width: 600px;
}

    Now, you shouldn’t actually keep the 600px number without also adding a media query. This is because smaller devices like mobile phones can be smaller than 600px wide. So if you wanted to limit CSS changes to large screens, you could do something like this:

    @media (min-width: 800px) {
	#menu #menu-item-199 ul {
		width: 600px;
	}
}

    That way, the menu wouldn’t get cut off on very small device screens.

    You should adjust the 600px number to something that makes the best sense for your menu items.

    This page explains about the difference between and ID and a class in CSS. You should check it out!
    http://www.htmldog.com/guides/css/intermediate/classid/

    This one talks about grouping. The nesting section is relevant:
    http://www.htmldog.com/guides/css/intermediate/grouping/

    And, to learn more about media queries, go to http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  • Unknown's avatar
    feedingtheneed · Member ·

    Thank you SO much! This is awesome information. Really, really appreciate your help and am looking forward to working with it!

    Best Wishes ~

    Regan

  • The topic ‘How to apply nowrap command to link navigation labels?’ is closed to new replies.