Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [How to?] Make text(link) active

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 14, 2013 at 3:28 am #150045
    Historical Forums User
    Participant

    Hello. I have a mystery for my knowledge. I have a menu, for example:

    Home Gallery Contact Donate
    When i am @ Home, i need this text (Home) to be bigger that the rest (font-size:16px;) and others default: (font-size:12px;)

    When i am @ Gallery, then Home is back to font-size: 12 and Gallery (font-size: 16px;). Can you please give me a tip on how to make this. Or this is html/php part ?

    P.S. i tried

    #navigation nav a {
    font-weight: bold;
    color: white;
    font-size:12px;
    text-decoration: none;
    }
    #navigation nav a:active {
    font-size: 16px;
    }
    but this didnt help.

    September 14, 2013 at 5:23 am #150054
    georgearnall
    Participant

    The easiest way to do this would be to give the active page menu item a class of something such as .active. Then just use:

    #navigation nav .active {
   font-size: 16px;
}

    If your site is literally static pages then it would be easy to add the class to the correct menu item. Otherwise you could use PHP but it really depends on what you are using. On WordPress, they provide you with a class of current_page_item to style such things.

    Hope this helps :)

    September 14, 2013 at 5:24 am #150055
    Paulie_D
    Member

    There are JS solutions that can set CSS states / classes automatically based on the html address of the page.

    If you only have 4 pages then you can give the body of each page and ID / class and use that in your CSSto target their respective link.

    Example.

    If you main page is Home

    You give the <body> a class of home

    <body class="home">

    in your HTML.

    Then in the menu you give each link it’s own class too

    <a href="home.html class="home">Home</a>

    Then in your CSS you can target each link as you want.

    body.home a.home,
body.gallery a.gallery,
body.contact a.contact,
body.donate a.donate  {
    your active styles;
    }
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.