Navigation CSS line below current page name

Community Forums Forums Design Tips and Tricks Navigation CSS line below current page name

This topic is: resolved

Tagged: ,

This topic contains 4 replies, has 4 voices, and was last updated by  kgshultz 3 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #108207

    kgshultz
    Member
    Post count: 10

    Hi,

    If you look at my website (www.kgshultz.com) you’ll see that there is a line under the navigation menu. However, the line disappears under the name of the current page. I’ve been looking everywhere and I can’t seem to find what that is called/what controls the line disappearing. Through CSS I think I’ve changed the color of everything else just trying to figure out what controls the disappearance of that line :-) I would like the line to be solid all the way across all the time. The only thing I want to show which page you’re on is the text changing color.

    If someone could point me in the right direction, it would be greatly appreciated.

    Thanks!

    http://www.kgshultz.com
    #108234

    Tony @ AlphaBlossom
    Participant
    Post count: 519

    Hello,

    You’ll have to add “display: block;” to your link element inside the nav. Change your .genesis-nav-menu a to this:

    
    .genesis-nav-menu a {
        display: block;
        padding: 20px;
        position: relative;
    }
    

    Have a great day!
    Tony


    #108235

    rfmeier
    Participant
    Post count: 597

    Hello,

    There is padding that is pushing the link (which has a white background) over the blue line. It can be fixed within your style.css file.

    [css]
    /* style.css line ~952 */
    .genesis-nav-menu a {
    color: #124E67 /* #617984; */
    display: block;
    padding: 20px;
    padding-bottom: 0; /* remove the bottom padding if the link */
    position: relative;
    }[/css]

    That should take care of the problem.


    #108237

    eamonmoriarty
    Participant
    Post count: 223

    At line 959 of style.css you have

    .genesis-nav-menu a:hover,
    .genesis-nav-menu .current-menu-item > a,
    .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
    	background-color: #fff;
    	color: #124E67;
    }

    If you remove background-color: #fff; I think that will achieve what you want.


    Eamon Moriarty
    EM Dzine

    #108238

    kgshultz
    Member
    Post count: 10

    Excellent, thank you! I removed the padding under the link and now it looks perfect.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.