WordPress.org

Ready to get started?Download WordPress

Forums

Code for Navigation Link Titles (8 posts)

  1. thesiegesound
    Member
    Posted 1 year ago #

    Greetings WordPress users. I am currently creating a navigation menu for my website and I am looking to change the color of my navigation titles so they don't blend in the background - since currently, my background and title colors are the same - and I am trying to locate the code in order to change the title color. However, I am not having any luck finding the specific area in the css editor where I can change title color, link color, etc.

    I am using the WPZOOM theme. When you visit the website, just scoll across the white area above the header image and you will notice the links. Any help is greatly appreciated.

    Here is my website - http://www.thesiegesound.com

  2. visualrhythm
    Member
    Posted 1 year ago #

    Hey thesiegesound,

    The code you are looking for is in your style.css file, this is where you add the background color.

    On line 62 of your style.css file add a line of code like this:
    background: #999;

    The final code should will look like this :

    nav ul, nav ol, #mainmenu, .part-items {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    background: #999; }

    Let me know if this helps! Good luck!

  3. thesiegesound
    Member
    Posted 1 year ago #

    the code for the meeta theme is just a little different than the code you posted. Here are the sections that I edited, but nothing seems to work:

    #navbar {
    float: left;
    margin: 5px 16px 5px 30px;
    color:#fff;
    }

    #navbarsecond {
    background: #fff;
    }

    #secondnav {
    background: #fff;
    line-height: 25px;
    padding: 12px 30px 3px;
    }

    #secondnav span {
    color: #827f7f;
    font-size: 12px;
    float: right;
    }

    #secondnav ul {
    list-style: none;
    }

    #secondnav li {
    float: right;
    font-size: 10px;
    background: #fff;
    color: #BCBCBC;
    display: block;
    height: 21px;
    padding: 3px 13px 0;
    margin: 0 7px 10px;
    border-radius: 10px;
    line-height:1.5;
    }

    #secondnav li a {
    font-size:16px;
    color:#758ea9;

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Careful, any changes to the theme's original files will erase once the theme updates.

    It's best to use either a Child Theme or Custom Style/CSS plugin when modifying themes.

  5. visualrhythm
    Member
    Posted 1 year ago #

    Hey there,

    Editing those lines of CSS will not change the background color of your navigation menu. It appears that the lines of code you changed are lower on the style.css file than the line I suggested.

    First, try to scroll up and look higher in the CSS code for :
    "nav ul, nav ol, #mainmenu, .part-items"
    it's listed under:
    /* Reset & General Styling */

    If you still cannot find that line of code, simply write an entirely new line of code in your CSS file that looks like this:
    #mainmenu { background: #999; }

    In either case, #mainmenu is the target ID that you need to update in order to change the background color.

  6. J
    Member
    Posted 1 year ago #

    if its the link color you want to change just edit this

    .dropdown a {
        color: #fff;
        display: block;
        font-size: 13px;
        line-height: 1.5;
        margin: 0 5px 0 0;
        padding: 8px 10px;
        text-decoration: none;
    }

    to this

    .dropdown a {
        color: #000000;
        display: block;
        font-size: 13px;
        line-height: 1.5;
        margin: 0 5px 0 0;
        padding: 8px 10px;
        text-decoration: none;
    }
  7. thesiegesound
    Member
    Posted 1 year ago #

    Ah.... Thanks J! That did the trick.

  8. J
    Member
    Posted 1 year ago #

    No problemo, glad it helped

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.