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
  • #150045

    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;
    text-decoration: none;
    #navigation nav a:active {
    font-size: 16px;

    but this didnt help.


    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 :)


    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.


    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.donate a.donate  {
        your active styles;
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.