Announcement

Collapse
No announcement yet.

Sub-Category Highlights Parent Category Tab

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Sub-Category Highlights Parent Category Tab

    Hi,
    I'm setting up my new store and I'm having trouble figuring out how to get my parent category to stay highlighted when a sub category is selected.

    I had a complicated (to me) Java script that would check the URL and change parent tab's background color according to what it found (parent category name was always in sub-category's name) but I'm wondering if I could just do this all in CSS.

    Is it considered acceptable to add something like

    <style>
    .Parent1 {background:gray;}
    </style>

    into the individual category headers to change the background color of the parent's tab? I tried it and it seems to work on all browsers so far. Just wondering what problems I'm going to run into?

    Thanks in advance!!
    Aaron
    Last edited by Aaron; 04-01-2013, 12:14 PM.

  • #2
    Originally posted by Aaron View Post
    Hi,
    I'm setting up my new store and I'm having trouble figuring out how to get my parent category to stay highlighted when a sub category is selected.

    I had a complicated (to me) Java script that would check the URL and change parent tab's background color according to what it found (parent category name was always in sub-category's name) but I'm wondering if I could just do this all in CSS.

    Is it considered acceptable to add something like

    <style>
    .Parent1 {background:gray;}
    </style>

    into the individual category headers to change the background color of the parent's tab? I tried it and it seems to work on all browsers so far. Just wondering what problems I'm going to run into?

    Thanks in advance!!
    Aaron
    I'm not entirely sure this is what you're after, but I understood it as:

    If you have the link hover change the background to white, you want it to stay white as you're scrolling through the child links.

    If that's correct, you want to do it in CSS. You just need to make the hover event on the li and NOT the a, like this:

    CSSDesk - E56Hz

    To see the difference, change the very top line 'ul li:hover' to 'ul a:hover'

    Comment


    • #3
      Thanks for the quick reply!

      I would like to click "fruit" and be taken to the fruits category with a list of fruit subcategories. If I then click "apples" and go to the apples page I would still like the "fruit" tab to stay highlighted so customers know that they are still in the "fruits" category. If that makes sense.

      I can do it by adding a

      <style>
      .Parent1 {background:gray;}
      </style>

      tag to each category's header but just not sure if that is the acceptable way to do it.

      Comment


      • #4
        Originally posted by Aaron View Post
        Thanks for the quick reply!

        I would like to click "fruit" and be taken to the fruits category with a list of fruit subcategories. If I then click "apples" and go to the apples page I would still like the "fruit" tab to stay highlighted so customers know that they are still in the "fruits" category. If that makes sense.

        I can do it by adding a

        <style>
        .Parent1 {background:gray;}
        </style>

        tag to each category's header but just not sure if that is the acceptable way to do it.
        Oh, I see. I know this is done in Wordpress using PHP to change the class of the selected category during page generation. I don't think there would be an easy way to accomplish this with how 3DCart is a closed system. I would attempt to do it with javascript like you mentioned in the original post.

        Can you send me a link to your store? I want to see how your nav is laid out.

        Comment


        • #5
          Ok... I think I have got it figured out. The experts online seem to agree it is perfectly acceptable to add a second <style> anywhere in the html code. So I just added some CSS to each category's header to darken the correct category tab. The background style in the category header is more specific so it overrides the main style.

          Here is the home page. The content & design are VERY rough right now. We are still months from going live. I'm mainly just working on the category bar right now.


          You can see on the link below that I'm in a subcategory but yet the main category tab is still highlighted.
          Last edited by Aaron; 04-02-2013, 07:41 PM.

          Comment


          • #6
            Any guesses why the category bar is shifted to the right? I cant seem to get it moved back over to line up with the image below it or centered in the opening.

            Comment


            • #7
              Originally posted by Aaron View Post
              Any guesses why the category bar is shifted to the right? I cant seem to get it moved back over to line up with the image below it or centered in the opening.
              Ahh, you hardcoded the nav. I thought you were using the default generated nav.

              The shift right has to do with the div you put in the ul. You shouldn't need to put that there. What is the reasoning behind it?

              Comment


              • #8
                The shift right has to do with the div you put in the ul. You shouldn't need to put that there.
                Thanks!!

                What is the reasoning behind it?
                haha... because I don't know what I'm doing :) . I have about 48 hours of total CSS experience so far. I put the div in there because I couldn't get the background gradient to work if I put it in the ul or anywhere else. The background always ended up on top of the text.

                I'll keep playing with it.

                Comment


                • #9
                  Learning CSS for the first time is always a blast!

                  Check this out: CSSDesk - QC6zf

                  This is how you could do it pretty simply without needing that div.

                  Comment


                  • #10
                    Thank you so much for the help!! It is possible that I may have never figured that out on my own.

                    That worked great but now do you have any guesses why my background image doesn't go the full width across the top anymore? I think that may be why I did the div in the first place.

                    I also cant figure out why I can not change my text hover color. It works great in the editors but when I put it in my site it seems to adopt the default hover color (orangish/yellow.


                    again,
                    Thanks for the help!

                    Comment


                    • #11
                      Originally posted by Aaron View Post
                      Thank you so much for the help!! It is possible that I may have never figured that out on my own.

                      That worked great but now do you have any guesses why my background image doesn't go the full width across the top anymore? I think that may be why I did the div in the first place.

                      I also cant figure out why I can not change my text hover color. It works great in the editors but when I put it in my site it seems to adopt the default hover color (orangish/yellow.


                      again,
                      Thanks for the help!

                      The background doesn't go the full width of the <ul> because you have some nested tables that seem to end short. I would put the <ul> directly in the <td> tag that holds the navigation, as I can see by my developer tools that it expands the full width.

                      To change the link TEXT color, use the 'color' property in the .navigation a{} block. so, color:#f00; for red etc.

                      Comment


                      • #12
                        Thanks again!

                        The text color ended up being because there was a a:visited:hover color defined later on in the CSS. Didn't know there was such a thing but that fixed it.

                        I really appreciate your help.

                        Comment


                        • #13
                          Originally posted by Aaron View Post
                          Thanks again!

                          The text color ended up being because there was a a:visited:hover color defined later on in the CSS. Didn't know there was such a thing but that fixed it.

                          I really appreciate your help.
                          No problem. Happy designing!

                          Comment

                          Working...
                          X