1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS How to manage the links: underline, coloured, etc

Discussion in 'Web Development' started by Rosalie, Dec 27, 2015.

  1. Rosalie

    Rosalie New Member Verified Member

    Free template Family Law Firm: it is beautiful, but the changing colors does not work for the navigation menu, how comes? How to change this in css?
     
    Last edited by a moderator: Dec 27, 2015
  2. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    I will update the template for you as I think it will look better with the color changes option and post here how I did it as soon as I have some free time.
     
  3. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    I have updated the template with color changes and underlined navigation links for you just download the Law firm template again. See live version of the Law firm website template.

    Now here for the explanation in case you or anyone else wants to know how I did it.

    First go to code line 154 or just search for this code part in the style.css file:

    Code:
    .navigation li.active > a, .navigation > a:hover {
       color: #fff;
    }
    Change it to:

    Code:
    .navigation li.active > a, .navigation li > a:hover {
       color: #fff;
    }
    Now you have color changes for mouse over effect.


    You can under line text links by using the css attribute text-decoration underline. Like this:

    Code:
    a {
       text-decoration: underline;
    }
    Now lets add it to our own template like this.

    Change the code that starts on code line 147 to 178 from this:

    Code:
    .navigation li > a {
       color: #b8c6ac;
       font: bold 13px/24px Times, "Times New Roman", serif;
       text-decoration: none;
       text-shadow: 1px 1px #000;
       text-transform: uppercase;
    }
    .navigation li.active > a, .navigation li > a:hover {
       color: #fff;
    }
    .navigation li > div {
       background-color: #888888;
       display: none;
       width: 110px;
       position: absolute;
       left: 0px;
       top: 24px;
    }
    .navigation li:hover > div {
       display: block;
    }
    .navigation li > div a {
       color: #b8c6ac;
       font: bold 13px/24px "Times New Roman", Times, serif;
       display: block;
       text-align: center;
       text-decoration: none;
       text-shadow: none;
    }
    .navigation li > div a:hover {
       color: #fff;
    }

    to this:

    Code:
    .navigation li > a {
       color: #b8c6ac;
       font: bold 13px/24px Times, "Times New Roman", serif;
       text-decoration: none;
       text-shadow: 1px 1px #000;
       text-transform: uppercase;
       text-decoration: underline;
    }
    .navigation li.active > a, .navigation li > a:hover {
       color: #fff;
       text-decoration: underline;
    }
    .navigation li > div {
       background-color: #888888;
       display: none;
       width: 110px;
       position: absolute;
       left: 0px;
       top: 24px;
    }
    .navigation li:hover > div {
       display: block;
    }
    .navigation li > div a {
       color: #b8c6ac;
       font: bold 13px/24px "Times New Roman", Times, serif;
       display: block;
       text-align: center;
       text-decoration: none;
       text-shadow: none;
       text-decoration: underline;
    }
    Now all your navigation links are underlined and change color on mouse over
     
  4. Rosalie

    Rosalie New Member Verified Member

    Still playing around with this.
    I made a link on the first page of the Testimonial, but color doesn’t want to change until now.
    Also I don’t see where the background-colour #88888 (code-line 160) has been used for.
    But I keep trying to figure it out ...
    Thank you!
     
  5. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    .navigation li > div with the background-color #88888 points to the background color of the drop down menu div box when you hover over the News link and get the "News Single post" that is where it's hiding.
     
    Last edited: Dec 28, 2015
  6. Rosalie

    Rosalie New Member Verified Member

    Oh, I see what happened: when changing the titles for my own menu I accidently removed the drop down menu box! That's why I didn't recognize the background-color! I am going to fix it! Thank you very much!!