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

HTML5 Navigation/Menu font colors

Discussion in 'Web Development' started by Keldertron, Feb 9, 2014.

  1. Keldertron

    Keldertron Member

    Possibly a dumb question with a stupid easy solution which is eluding me.

    The font on my nav bar for the active page is supposed to be orange. But only "home" link is orange on each page and the rest stay as is.

    If you need to see what I mean, site is www.snapdragonz.com

    I'm better (Note: not GOOD!) at HTML than the CSS aspect, so it makes me sad that so many codes have become obsolete in HTML5. And this little thing has me a little confused.
     
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Don't be sad it hasn't change that much. All you need is a little observation and deduction.
    Kinda like this.
    When you look at the code for the css and html files you find <li class="active"> which is set as an orange color
    (css) and shows up preceding <a href="index.html">Home</a> (html)
    Now if you were to remove
    <li class="active"> and place it in front of the <a href="sales.html">Shop</a> while you were editing the Shop page, guess what would happen.
    Do this for every page and the page menu item will change to orange.
    See some things just don't change.
    Hope this helps.


    Code:
    the css
    #navigation li.active a { color: #F99600;}
    
    
    the html
    <ul id="navigation">
            <li class="active"><a href="index.html">Home</a>
                  </li>
                    <li>
                        <a href="sales.html">Shop</a>
                    </li>
                    <li>
                        <a href="news.html">News</a>
                    </li>
                    <li>
                        <a href="about.html">About</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
              </ul>
     
    CovertPea and Keldertron like this.
  3. Keldertron

    Keldertron Member

    Heh. I knew it was an easy fix. Just couldn't seem to figure out what. For some reason I thought the css code took care of it all. LOL

    Thank you! (I'm a little less sad now! I even put an icon in my nav bar!) ;)
     
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    So glad I could help.
    Your site is coming along nicely.
    In the menu you have Shop - what software are you going to use for it?
     
  5. Keldertron

    Keldertron Member

    Thanks!

    I wasn't going to use any software - I don't want people to send me money until they contact me, since the majority of what will be available is live animals. The few dry good I'll have I was just going to set up a Paypal shop.