14 Replies Latest reply on Jan 9, 2014 12:03 PM by armona22

    Navigation menu active page color not behaving as it should

    armona22

      I created an unordered list for the mainnav links. I use the following lines in the code:

       

      <li><a href="../index.html" class="thispage">Home</a></li>

              <li><a href="#">Events</a></li>

              <li><a href="#">Music</a></li>

              <li><a href="#">Agenda</a></li>

              <li><a href="../Pages/artists.html">Artists</a></li>

       

      The Home button shows the color for 'active', but if I go to the artists page it first shows the hover color, then the page opens but does not show the active color.... I.o.w. the Home button stays on active though it is not active.

       

      Please see the effect on my testsite: www.adrianrooymans.nl

        • 1. Re: Navigation menu active page color not behaving as it should
          Jon Fritz II Adobe Community Professional & MVP

          Take a look at this page (created by Nancy O) if you want to add a "you are here" style to your links...

           

          http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

          • 2. Re: Navigation menu active page color not behaving as it should
            armona22 Level 1

            I am working in Dreamweaver CC, I have done the Bayside Beat Tutorial, and it works perfectly. I created this one exactly the same way as in the tutorial, with a selector

            #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage with background color set to blue. The class thispage was set for the home page.

            Then I created and linked the artists page as was the page 'sightseeing' linked in the tutorial. I compared the settings time and again to no avail: the tutorial works, my test does not work. The artists page opens but the link remains on black.

            (Why should I now go back to the old version of Dreamweaver to see if that works? I know it works in the old one, have done it many times.)

             

            Here's my code:

             

            <nav id="mainnav">

                  <ul>

                    <li><a href="index.html" class="thispage">Home</a></li>

                    <li><a href="#">Events</a></li>

                    <li><a href="#">Music</a></li>

                    <li><a href="#">AGENDA</a></li>

                    <li><a href="Pages/artists.html">ARTISTS</a></li>

                    <li><a href="#">Records</a></li>

                    <li><a href="#">Shop</a></li>

                    <li><a href="#">Contact</a></li>

                  </ul>

                </nav>

             

             

            Here's the code as works in the tutorial:

             

            <nav id="mainnav">

                  <ul>

                    <li><a href="index.html" class="thispage">Home</a></li>

                    <li><a href="sightseeing.html">Sightseeing</a></li>

                    <li><a href="#">Eating Out</a></li>

                    <li><a href="#">What's On</a></li>

                    <li><a href="#">Where to Stay</a></li>

                  </ul>

                </nav>

            • 3. Re: Navigation menu active page color not behaving as it should
              Jon Fritz II Adobe Community Professional & MVP

              Without seeing the rest of your code, what you have isn't going to work correctly.

               

              Right now, you don't have a color set for "a" or "a:link" except for the a.thispage class. That means the default colors will show for the link color (blue) and the visited color (purple).

               

              If you set a link color first, for example...

               

              a:link {color:green;}

               

              All of your links, except the later a.thispage, will start as green. As long as you have the remaining pseudo classes set in the right order, they will act correctly.

               

              I use the mneumonic "Las Vegas Has Action"

               

              a:link

              a:visited

              a:hover

              a:active

               

              If any of those 4 are out of order/missing, they will behave incorrectly or fall back to the browser default.

              • 4. Re: Navigation menu active page color not behaving as it should
                armona22 Level 1

                Thank you Jon Fritz II

                I'll try that one and report back a bit later.

                • 5. Re: Navigation menu active page color not behaving as it should
                  osgood_ Level 8

                     Thats because on the ARTISTS page your meant to move class="thispage" from the Home link to the Artist link. So the code looks as below.

                   

                  <ul>

                          <li><a href="index.html">Home</a></li>

                          <li><a href="#">Events</a></li>

                          <li><a href="#">Music</a></li>

                          <li><a href="#">AGENDA</a></li>

                          <li><a href="Pages/artists.html" class="thispage">ARTISTS</a></li>

                          <li><a href="#">Records</a></li>

                          <li><a href="#">Shop</a></li>

                          <li><a href="#">Contact</a></li>

                        </ul>

                   

                  I don't know what tutorial youre following and how the navigation is set up but unless the class appears on the correct link when the 'active' page is viewed and its taken off the other links it won't work.

                  1 person found this helpful
                  • 6. Re: Navigation menu active page color not behaving as it should
                    armona22 Level 1

                    In fact: nothing is missing....  and earlier I mentioned that the CSS has

                    #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage  whereby the background color is set to the blue color that you see on my testsite. That color is clearly visible when hovering, but it is not there when a page is active. Once I click the Artists page the color changes to blue, but when the cursor moves away the blue color disappears, while all that time the Home button remains unchanged with a blue background as if it is the active page.If the selector is correct it should be allright as it is in the tutorial. It can not be that only part of the rule works if it is written correctly.

                    • 7. Re: Navigation menu active page color not behaving as it should
                      armona22 Level 1

                      I'm sorry, but I tried that already, and it does not solve the problem. If I do that I get TWO active pages, but clicking anywhere on the artists page makes the blue color go away, except for the Home button.... I could temporarily put that on the testserver so that you could see what happens (unless you beleive me).

                      • 8. Re: Navigation menu active page color not behaving as it should
                        armona22 Level 1

                        The tutorial can be found at https://helpx.adobe.com/creative-cloud/learn/start/dreamweaver.html

                         

                        I'll post the finished tutorial code here, and it is clear that there is no difference in this code and mine as far as the ul is concerned:

                         

                        <!doctype html>

                        <html>

                        <head>

                        <meta charset="utf-8">

                        <title>Bayside Beat Cable Cars</title>

                        <link href="styles/main.css" rel="stylesheet" type="text/css">

                        <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n6:default.js" type="text/javascript"></script>

                        </head>

                         

                         

                        <body>

                        <div id="wrapper">

                          <header id="top">

                            <h1>Bayside Beat</h1>

                            <nav id="mainnav">

                              <ul>

                                <li><a href="index.html" class="thispage">Home</a></li>

                                <li><a href="sightseeing.html">Sightseeing</a></li>

                                <li><a href="#">Eating Out</a></li>

                                <li><a href="#">What's On</a></li>

                                <li><a href="#">Where to Stay</a></li>

                              </ul>

                            </nav>

                          </header>

                          <div id="hero">

                            <article>

                              <h2>Be Where It&rsquo;s At</h2>

                              <p>San Francisco is one of the most exciting  and vibrant cities on the planet. Bayside Beat is here to keep you informed of  the best places to see, where to eat, what to do, and where to lay down your  weary head after an action-packed day—or night—on the town.</p>

                            </article>

                          <img src="images/golden_gate.jpg" alt=""/></div>

                          <article id="main">

                            <h2>Riding the Cable Cars</h2>

                            <p>No visit to San Francisco i

                        • 9. Re: Navigation menu active page color not behaving as it should
                          osgood_ Level 8

                          armona22 wrote:

                           

                          I'm sorry, but I tried that already, and it does not solve the problem. If I do that I get TWO active pages, but clicking anywhere on the artists page makes the blue color go away, except for the Home button.... I could temporarily put that on the testserver so that you could see what happens (unless you beleive me).

                           

                          You will get two active menu items unless the class is removed from the links that you don't want it on.

                           

                          If you look at the example page code in the 'completed' folder of the Bayside Beat tutorial you will see on the 'index' page the class has been added to the 'index' link:

                           

                           

                          <nav id="mainnav">

                                <ul>

                                  <li><a href="index.html" class="thispage">Home</a></li>

                                  <li><a href="sightseeing.html">Sightseeing</a></li>

                                  <li><a href="#">Eating Out</a></li>

                                  <li><a href="#">What's On</a></li>

                                  <li><a href="#">Where to Stay</a></li>

                                </ul>

                              </nav>

                           

                          Whilst on the 'sightseeing' page the class has been moved to the 'sightseeing' link:

                           

                          <nav id="mainnav">

                                  <ul>

                                      <li><a href="index.html">Home</a></li>

                                      <li><a href="sightseeing.html" class="thispage">Sightseeing</a></li>

                                      <li><a href="#">Eating Out</a></li>

                                      <li><a href="#">What's On</a></li>

                                      <li><a href="#">Where to Stay</a></li>

                                  </ul>

                              </nav>

                          1 person found this helpful
                          • 10. Re: Navigation menu active page color not behaving as it should
                            armona22 Level 1

                            I appreciate your comments and suggestions, but... what more should I do to

                            convince somebody that what I did is an exact replica of what is instructed

                            in the tutorial

                            https://helpx.adobe.com/creative-cloud/learn/start/dreamweaver.html (Yes,

                            on the adobe website) part 4 and 5 which will take you only minutes to

                            listen to the instructions. I already posted the result (which works fine),

                            and my result, which I have done and checked and compared so many times now

                            that I'm about to give up Dreamweaver CC.

                             

                             

                            2014/1/9 osgood_ <forums_noreply@adobe.com>

                             

                                Re: Navigation menu active page color not behaving as it should created by

                            osgood_ <http://forums.adobe.com/people/osgood_> in *Dreamweaver support

                            forum* - View the full discussion<http://forums.adobe.com/message/5997085#5997085

                             

                            • 11. Re: Navigation menu active page color not behaving as it should
                              armona22 Level 1

                              You write:

                               

                              Whilst on the 'sightseeing' page the class has been moved to the 'sightseeing' link:

                               

                              <nav id="mainnav">

                                      <ul>

                                          <li><a href="index.html">Home</a></li>

                                         <li><a href="sightseeing.html" class="thispage">Sightseeing</a></li>

                               

                              This is not true!!!

                              I just copied the code, and it reads:

                               

                                  <h1>Bayside Beat</h1>

                                  <nav id="mainnav">

                                    <ul>

                                      <li><a href="index.html" class="thispage">Home</a></li>

                                     <li><a href="sightseeing.html">Sightseeing</a></li>

                                      <li><a href="#">Eating Out</a></li>

                                      <li><a href="#">What's On</a></li>

                                      <li><a href="#">Where to Stay</a></li>

                                    </ul>

                              • 12. Re: Navigation menu active page color not behaving as it should
                                Jon Fritz II Adobe Community Professional & MVP

                                armona22 wrote:

                                 

                                You write:

                                 

                                Whilst on the 'sightseeing' page the class has been moved to the 'sightseeing' link:

                                 

                                <nav id="mainnav">

                                        <ul>

                                            <li><a href="index.html">Home</a></li>

                                           <li><a href="sightseeing.html" class="thispage">Sightseeing</a></li>

                                 

                                This is not true!!!

                                I just copied the code, and it reads:

                                 

                                    <h1>Bayside Beat</h1>

                                    <nav id="mainnav">

                                      <ul>

                                        <li><a href="index.html" class="thispage">Home</a></li>

                                       <li><a href="sightseeing.html">Sightseeing</a></li>

                                        <li><a href="#">Eating Out</a></li>

                                        <li><a href="#">What's On</a></li>

                                        <li><a href="#">Where to Stay</a></li>

                                      </ul>

                                 

                                Are you 100% sure you are on the sightseeing.html page and that page functions as expected in the browser?

                                 

                                The code you have pasted is from the index.html page. There is literally nothing in the code posted what would allow the sightseeing link to become active, (the code that would change the style is on the index link) sightseeing should appear exactly the same as the other three # links since they all use the same css.

                                • 13. Re: Navigation menu active page color not behaving as it should
                                  osgood_ Level 8

                                  armona22 wrote:

                                   

                                  You write:

                                   

                                  Whilst on the 'sightseeing' page the class has been moved to the 'sightseeing' link:

                                   

                                  <nav id="mainnav">

                                          <ul>

                                              <li><a href="index.html">Home</a></li>

                                             <li><a href="sightseeing.html" class="thispage">Sightseeing</a></li>

                                   

                                  This is not true!!!

                                  I just copied the code, and it reads:

                                   

                                      <h1>Bayside Beat</h1>

                                      <nav id="mainnav">

                                        <ul>

                                          <li><a href="index.html" class="thispage">Home</a></li>

                                         <li><a href="sightseeing.html">Sightseeing</a></li>

                                          <li><a href="#">Eating Out</a></li>

                                          <li><a href="#">What's On</a></li>

                                          <li><a href="#">Where to Stay</a></li>

                                        </ul>

                                   

                                  You need to look at the sightseeing page again!!

                                  • 14. Re: Navigation menu active page color not behaving as it should
                                    armona22 Level 1

                                    I did, and as so often I could comment on myself as "you stupid boy!". I

                                    simply had to change the code from within the artists page as you

                                    suggested. Thanks for pointing it out!

                                     

                                     

                                    2014/1/9 osgood_ <forums_noreply@adobe.com>

                                     

                                        Re: Navigation menu active page color not behaving as it should

                                    created by osgood_ <http://forums.adobe.com/people/osgood_> in *Dreamweaver

                                    support forum* - View the full discussion<http://forums.adobe.com/message/5997789#5997789