Menu Items

  • rodiy2k · Member ·

    Hi
    I’m trying to add CSS to change my main menu; I’d like to change font family, font size, text-transform to capitalize and some custom padding. As usual I can’t figure out what selectors to use to make it work; based on my Chrome editor, it appears the code should look something like this: 

    .main-navigation ul.nav-menu	{
	font-family:	cabin, helvetica, arial, "sans-serif";
	font-size: 1.3em;
	text-transform:	capitalize;
	padding: 15px, 20px, 15px, 0px;
}

    Can someone please have a look on their editor and help?
    Thanks

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

  • thesacredpath · Member ·

    Hi there, you where ever so close. Use the following selector
    .main-navigation a
    instead of
    .main-navigation ul.nav-menu
    and you should be good to go.

  • rodiy2k · Member ·

    Hi
    Thanks for helping; Sorry; I have to ask because I’m determined to figure this out myself
    From using my Chrome editor, how would I determine that I need to substitute the ul.nav-menu with the a?

    In other words, what does the a mean since I don’t see it anywhere when I attempt to use the magnifier to identify the selector?

    Is it just something you know ? I’ve read many tutorials yet I still have to bother you guys every time

    Thanks !!!

  • thesacredpath · Member ·

    In some instances the font family, color and size may be declared in the ul.menu, and in some instances it is declared in the “a” element. Each menu item is a link, and in HTML, links are “a” elements and will look something like this:
    <a http://.... /a>

    In some cases the font family is not declared directly in the CSS for the menu, but inherited from other higher level parent elements.

    When you inspect the ul.nav-menu element, you can scroll down through the CSS and see where the font family, size and such is inherited from. In most instances with menus, you end up creating the CSS selector you need, and on menus, that usually means drilling down and using the “a”.

  • rodiy2k · Member ·

    OK thanks
    I think I get it regarding menus and

    One last one: again, I ‘m sorry: I’ve spent over 4 hours inspecting and playing and still can’t get it: please help with my text widgets:

    1) The “expat blog” text widget with two images:
    trying to put a bit of space between the two images; can’t see how to add padding or margin just between the two images

    2) The Thailand and bloglovin text images: I see the bottom margin is 15px; think I’d like between 8 and 10px for a top margin (or is it actually padding?) –

    either way, for the bloglovin image, this would be the space right under the top border and for the thailand, this would be the space under the thin bottom border of the widget title

    I tried a million things and can;t figure out what selectors I’d need to add the margin (or padding to)

    Thanks as usual !!

  • thesacredpath · Member ·

    1) To add some space between, open the text widget and in the img src section, which looks something like this (some things may be in different order)
    <img border="0" alt="Expat in Malaysia" src="http://www.expat-blog.com/logo/logoExpatBlog.png">
    add a style declaration with a bottom margin such as below. The style=”margin-bottom: 10px;” goes between the img and src in that HTML, like this (you can edit the 10px value as desired)
    <img style="margin-bottom: 10px;" border="0" alt="Expat in Malaysia" src="http://www.expat-blog.com/logo/logoExpatBlog.png">

    2) In the Thailand text widget, the image is within paragraph tags, which has a bottom margin of 10px. What we can do is to target that text widget by its unique CSS id, which is text-6 and then adjust the bottom paragraph margin like this. 

    #text-6 p {
margin-bottom: 10px;
}

    All widgets also have a bottom margin of 15px, so again, we could target that individual widget by CSS id and then you can adjust that 15px value like this 

    #text-6 {
margin-bottom: 10px;
}

    I would probably try the first and see if you can get what you want by setting that bottom margin to a lower value, even 0. If that doesn’t get you what you want, you can go after the text widget bottom margin. Neither is better or worse really, so your choice.

  • thesacredpath · Member ·

    For the bloglovin’ widget, you can do like we did with the expat image, but instead of doing margin-bottom, do margin-top.

  • rodiy2k · Member ·

    Hi
    How much do I owe you for the personal lessons? lol

    Thanks once again so much. As you explain stuff, it begins to make more sense. How come you make it easier to understand than all the tutorials?

    I’ll work on all this and let you know how i came back and hopefully I’m running out of changes ; sheesh; better not ever change my theme !!

    Thanks again

  • rodiy2k · Member ·

    Hi
    Regarding the menu screen, I’ve used this but the text remains in all caps. any suggestions?

    .main-navigation a	{
	font-family:	cabin, helvetica, arial, "sans-serif";
	text-transform:	capitalize;
	font-size:	1.2em;
	padding:	15px,	20px,	15px,	0;
}
  • rodiy2k · Member ·

    1) To add some space between,

    Hi again
    On the bloglovin widget, one more question:
    I did add the style declaration a s you suggested but used a top margin which is where I wanted the space. So now, I’m trying to even out so top and bottom both use 10px and it looks even.

    I’m unclear how to add another style declaration to include both margins; oddly, if i just type the the same exact thing after the first margin declaration and substitute “bottom” for top, when I click “save”, my browser seems to delete what I’ve written altogether and substitute it with something shorter; Did i type wrong or is this a Chrome issue?

    Thanks again

  • rodiy2k · Member ·

    2) In the Thailand text widget, the image is within paragraph tags, which has a bottom margin of 10px. What we can do is to target that text widget by its unique CSS id, which is text-6 and then adjust the bottom paragraph margin like this. 

    #text-6 p {
margin-bottom: 10px;
}

    Sorry: still more questions but I’m totally understanding where to find the text-6 on the editor:

    So if I go all the way to margin-bottom of zero, it reduces it by only 1/16th of an inch on a ruler. If I wanted to have the bottom margn be the same space away as the top margin (which is actually the bottom border of the widget title), how would I make it even less pace?

    Or, alternatively and even better: Suppose I liked the margin-bottom at zero and just wanted the top to be the same: how can I add that? I tried adding margin-top and it didn’t change anything

    Thanks

  • thesacredpath · Member ·

    Regarding the menu screen, I’ve used this but the text remains in all caps. any suggestions?

    Ok, my bad. They’ve used a slightly more specific selector for the menu text-transform. Add this to change the text-transform for the menu: 

    .main-navigation li a {
text-transform: capitalize;
}

    For the style declaration in the image code, you can just put them inline such as this:
    <img style="margin-bottom: 10px; margin-top: 10px;" border="0" alt="Expat in Malaysia" src="http://www.expat-blog.com/logo/logoExpatBlog.png">

    Typically if the code is stripped from a text widget, it means that there is something wrong with the code since WordPress.com checks the syntax to make sure it isn’t going to cause issues on your site. The code above should work just fine as I have it for the expat blog image. Here is the complete code including the link part of things with the 10px top and bottom margins.
    <a title="Expat in Malaysia" href="http://www.expat-blog.com/en/destination/asia/malaysia/"> <img border="0" alt="Expat in Malaysia" src="http://www.expat-blog.com/logo/logoExpatBlog.png" style="margin-bottom:10px; margin-top: 10px;"> </a>

    On the Thailand image, it looks like you are really close. You can adjust the 15px bottom margin on the text-6 rule if you wish to to say, something like 13px. 

    #text-6 {
margin-bottom: 15px;
}

    It looks like you have things really close though.

  • rodiy2k · Member ·

    Hi
    Awesome; one last issue on the menu:
    After making the menu changes, the categories nested under the main navigation menu are in a smaller font. I can’t seem to get the magnifying glass to appear over them to find the selector. Can you tell me how to get the sub-categories the same font size as the main menu items?
    Thanks so much

  • thesacredpath · Member ·

    Ah, tricky they are. Add the following to get the submenu font sizes the same. 

    .main-navigation li ul li a {
font-size: 1.1em;
}
  • rodiy2k · Member ·

    thanks as usual

  • rodiy2k · Member ·

    and even one more (sorry)
    I added the “home” on my main menu but the color is not the same as the rest which looks dumb. Can you help?
    God I owe you an entire year of cocktails
    Thanks

  • thesacredpath · Member ·

    The current page item in the menu has a different color to help visitors know which page they are on. You can click on “Transition” and that page item will turn the grey color as well. It is standard web design practice to in someway differentiate current menu items from the rest. To change the current page item color, add the following CSS and adjust the color as you desire. 

    .main-navigation .current-menu-item > a {
    color: #cc0000;
}
  • rodiy2k · Member ·

    well as they say
    “you learn something new every day if you keep your eyes open and your mouth shut”
    Thanks for teaching me yet another tidbit I did not know. It makes sense so visitors know what page they’re on so I will just leave it

  • thesacredpath · Member ·

    You are welcome, and you can certainly choose any color you wish. Some prefer to keep the same color as the other menu items and then style the text differently, such as making it bold, or adding an underline or overline.

  • The topic ‘Menu Items’ is closed to new replies.