WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Changing FONT of ONE menu item (16 posts)

  1. johnthompson008
    Member
    Posted 1 year ago #

    I see lots of posts about changing font color of just one menu item, I want to change just the font of one menu item. I want the link on my site that is "For Children" to be a fun kid kind of font, while the rest of the links in my menu stay as they are.

    I have gone thru almost all of the edit screens using the search function to search the html for "For Children" to adjust the font, but i can't find my menu items listed anywhere in the code. I have little to no idea what i'm doing with html, but enough that i could figure it out with instruction.

    http://john-messenger.com/

    Thanks!

  2. flashrebel
    Member
    Posted 1 year ago #

    CSS , so font and colour and style is taken for all menu items.
    You need to add style to your CSS file where is menu

    Something like this: (put your style, colour ... anything, xx-number of your menu item)
    li#menu-item-xx a {
    color:red;
    font-weight:bold;
    }

    If you will search, you will find some posts here on forum about this.

    What about your big logo ? Who wanna look and low quality black tree on full screen ?

  3. johnthompson008
    Member
    Posted 1 year ago #

    I have another form open in the process of trying to figure out this logo issue.

    http://wordpress.org/support/topic/how-to-make-logo-overlap-menu-bar?replies=6#post-3898713

    As for CSS, where on my site do i find where to type in CSS and make changes with it?

  4. flashrebel
    Member
    Posted 1 year ago #

    Your CSS for you is here (folder where your wordpress are located)/wp-content/themes/pinboard/style.css

    You can put your style on the bottom, not sure if this is the best way, but it will works. Probably better to put it somewhere on right place in menu items, try to search here on forum, more topics about it here

  5. johnthompson008
    Member
    Posted 1 year ago #

    i still don't understand. where do i find the folder where wordpress is located? somewhere on the dashboard? I'm totally lost. I've been reading all these posts about people editing with CSS and HTML but all i can find is the EDITOR on the dashboard, which tells me not to edit styles there but to use CSS.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    I can see how it can be confusing when people recommend different methods.
    The general rule is to avoid editing the theme's files.

    To handle your CSS modifications, try using a Custom CSS Manager plugin.

  7. johnthompson008
    Member
    Posted 1 year ago #

    Thank you. I downloaded Customer CSS Manager and now I see where I can enter CSS. I entered the code listed above this way:

    li#menu-item-3 a {color:red;font-weight:bold;}

    and hit "Save changes" and saw no adjustments made to my menu. What am I missing?

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Where are you getting that menu-item-3 ID from?

  9. johnthompson008
    Member
    Posted 1 year ago #

    The menu item I want to change is the third from the left. The "for children" link in the menu. I'm guessing with regards to how I apply the generic suggestion for a CSS code given above on this post. I read a book on html and css, but still don't get it so I'm just trying to experiement...but none of my experiments seem to take any affect, which is leading me nowhere fast.

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hi John, Try this in your new CSS section:

    #access li.page-item-37 a {
       font-family: XXXXXX;
    }

    Make sure you clear your browser cache after making any changes.

  11. johnthompson008
    Member
    Posted 1 year ago #

    AWESOME!!! It worked! Can I change color and size with CSS...

  12. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    CSS.

  13. johnthompson008
    Member
    Posted 1 year ago #

    Thank you, between the online instruction with CSS and the book i'm reading i'm starting to get it. Here's what i'm trying to figure out at the moment. I've entered:

    #access li.page-item-37 a {
    font-family: curlz mt; font-size: 23px; color: #aabadd;
    }

    into my Custom CSS Manager and have successfully formatted just the font, size, and color of the one menu item i want. Even when i changed the order of that menu item on the menu, the formatting followed it which made made me happy, i thought it would just format whatever item was in that space.

    I understand the the # is used to select and element based on it's id, so the id must be "access" li. means list, and page-item-37 must obviously be the menu item i'm working with. My understanding here is that these symbols are relating to the HTML written already in the theme. So i thought as an experiment i would try to custom format a different menu item by finding it in the HTML editor to see how that menu item is labeled (since i'm not quite sure why one of the 6 links in my menu bar is labeled page-item-37) and then i could format that. I opened up the HTML editor and did a search for "page-item-37", or just "page-item" to find where the other menu items are listed and how they are listed, so i could manipulate them using CSS. But i don't find that anywhere in the editor. Am i on the right track? Where would i find out what the other menu items are in order to manipulate them with CSS, and am i right that i need to basically understand how to read the HTML in order to know how to apply CSS to accomplish what i'm working toward?

    Thanks!

  14. johnthompson008
    Member
    Posted 1 year ago #

    Thanks!

  15. CAUX
    Member
    Posted 1 year ago #

    Hi All!

    This is my site http://www.cauxig.com, as you can see when you expand the menu it overlaps with the rest of the menu bar. Someone knows how to fix that?
    Thanks!

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    as you can see

    Sorry, your website doesn't load.
    Anyway you should create your own thread to discuss your own issue.

Topic Closed

This topic has been closed to new replies.

About this Topic