WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [TwentyEleven] Changing Navbar Font with Child Theme (19 posts)

  1. pucklitaay
    Member
    Posted 1 year ago #

    Hi guys,

    I'm using twentyeleven as a theme on my blog. Though I want to change the font of the Navigation bar. How can I change this? And how can I change the color of both the hover and regular nav bar?

    My site is currently closed, so I can't post a link here.

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You need to use either a Child Theme or Custom Style/CSS plugin to modify themes not custom.

    Are you familiar with CSS?

  3. pucklitaay
    Member
    Posted 1 year ago #

    Yes I am. I'm currently using a child theme but what do I have to modify to make the font change in the nav bar?

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    It may be the anchor tag, but I'm just guessing.
    Can you Pastebin.com the contents of your HTML and CSS for the navigation?
    You can paste it in this thread if it isn't long.

  5. pucklitaay
    Member
    Posted 1 year ago #

    Here is the style.css of the child theme. It's very short.

    /*
    Theme Name:            Twenty Eleven Child
    Theme URI:                http://oneofpoints.com
    Description:                Child theme for the Twenty Eleven Theme
    Author:                         Puck Litaay
    Author URI:                 http://oneofpoints.com/about/
    Template:                    twentyeleven
    Version:                       0.1.
    */ 
    
    @import url("../twentyeleven/style.css"); 
    
    #site-title a {
        color:  #000;
    } 
    
    #branding #searchform {
    display:none;
    }

    What do I add to this so I can change the font of the navi?

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Can you also post the HTML of the navigation?

  7. pucklitaay
    Member
    Posted 1 year ago #

    What exactly do you mean? The information about the nav bar in the original TwentyEleven theme stylesheet? Or in some php file :) ?

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Assuming you're using Windows:

    • View the web page.
    • Right click anywhere on the page.
    • Select "View source".
    • Copy all the code.
    • Paste it in Pastebin.com.
    • Link us the pastebin URL once completed.
  9. pucklitaay
    Member
    Posted 1 year ago #

    You can view the HTML here:

    http://pastebin.com/tbWXmJz5

  10. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    To change the font styles to the navigation links, use the CSS;

    #access a {
     font-family: Your font family;
     color: #yourFontColour;
    }

    To change the font styles to the hovered navigation links, use;

    access a:hover {
     color: #yourFontColour;
    }

    Resource on font-family - http://www.w3schools.com/cssref/pr_font_font-family.asp

    Resource on color -
    http://www.w3schools.com/css/css_text.asp

  11. zex2911
    Member
    Posted 1 year ago #


  12. pucklitaay
    Member
    Posted 1 year ago #

    It seems like none of these seem to influence the navigation bar? Any thoughts? ):

  13. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Can you show the code you're using?

  14. pucklitaay
    Member
    Posted 1 year ago #

    I'm using the codes you sent me :)

  15. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    The code I sent you won't work as is.
    You need to replace, "Your font family" and "yourColour" with relevant values.

  16. pucklitaay
    Member
    Posted 1 year ago #

    I did, replace them with that - sorry forgot to mention that - but it still doesn't work.

  17. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    There is likely to be styles overriding the code mentioned. As we haven't access to your website, my last resort would be adding !important on the end of your styles.

    Example;

    #access a {
     font-family: Your font family !important;
     color: #yourFontColour !important;
    }

    More info what !important does - http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

  18. pucklitaay
    Member
    Posted 1 year ago #

    Yes, the !important; did the trick! :)

  19. George Hozendorf
    Member
    Posted 8 months ago #

    Here what I added to child theme css. As you can see some things worked and others didn't. Before updating to twentyeleven 1.6, they did. Adding important didn't change anything. Any suggestions?

    /*Reduce Space between Paragraphs/* /*DID NOT WORK*/
    p {
    margin-bottom: .5em;
    }

    /*Indent Post Paragraphs*/
    p {
    text-indent: 1.5em;
    }

    /*Decrease Line Spacing in Paragraphs*/ /*DID NOT WORK*/
    body, input, textarea {
    line-height: 1.625em;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic