Jump to content
Sign in to follow this  
djcsuomi

Navigation Bar CSS problems

Recommended Posts

djcsuomi

I have been trying to change the color scheme of the navigation bar to my liking and I have run into a couple of problems. I am using drop down navigation and I have been able to change most of the options that I have wanted to. I have changed the color of the active page, the highlighted option, the background color of the drop down, the highlighted drop down option, etc. What I cannot seem to do is to change the color of the drop down ancestor, it just defaults to the platform pro design control option. What I mean is that if I went to the About Us tab and brought up the drop down menu the color of the About Us tab changes once I begin navigating the drop down menu. It changes to the box color of secondary site elements and I would like to choose another color using CSS. Also I cant seem to figure out how to highlight the Parent of a child page when I am currently on the child page. For example, I chose the drop option Our Team under the About Us tab in the navigation menu. When I am on the Our Team page I would like the About Us tab to be highlighted to let me know that I am currently in that drop down section. Right now it highlights the Our Team once the About Us drop down has been selected but I would like it to have both highlighted so that the user sees "Oh I am on About Us right now" and then brings up the drop down menu for About Us and sees that the Our Team page is highlighted.

Share this post


Link to post
Share on other sites
djcsuomi
#primary-nav .main-nav li a:hover{color: black; background:cyan;} #primary-nav .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a {color: black; background:blue;} #menu-nav .children li a:hover, #menu-nav .children li a:focus, #menu-nav .children li a:active{background:orange; color:black;} #menu-nav .children li{background:red;} I am running on localhost right now so I cant post a link. Ill try to describe it better, I used different colors in my css to make it easier to talk about... When you highlight a parent page in the nav, my css highlights it cyan instead of the base green color of my menu. When you scroll from the parent page to its drop down menu, the child page is highlighted in red and the non-highlighted parts are in orange but the parent page (now no longer hovered over but the drop down is active) displays the color of the secondary element box color that platform is set to. I would like to know the CSS to change the color independent of platform pro's design controls. The second thing I would like to do is to highlght the parent page as well as the child page when the current page is a child page The Code: #primary-nav .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a {color: black; background:blue;} Works well when a parent page is selected, but when a child page from the drop down menu is the active page it only highlights the child page. Since this can only be seen after the menu has been dropped down, I would like to have the nav set up so that both the parent and child page are highlight when active

Share this post


Link to post
Share on other sites
Kate
It's really hard to help you with the code when we can't see it ;) There is some CSS in place to reference the parent element of a dropdown (to keep it highlighted). Is this what you're trying to do? Custom CSS for the menus that you added may be conflicting with the default code.

Share this post


Link to post
Share on other sites
djcsuomi
Nothing is conflicting, its doing what its supposed to do, I just dont know the proper pointer to use in the CSS to change the color of the parent of the drop down menu while I am hovering over its children. There is the base nav bar color and a hover nav bar color, these are working properly. There is a separate base color and hover color for the children in a drop down menu, these are working properly. The problem is that to bring up the drop down menu you hover over the parent (base color changes to hover color) and then when you scroll to the children in the drop down menu the parent changes colors again but not to the hover color or base color. The problem is that I cant find the name of the CSS pointer that controls the parent of an activated drop down menu. Also when a child page is the active page, I would like both the child and parent to be highlighted as active instead of just the child. I thought I was doing this when I used the ancestor CSS tags in my code above but it did not work.

Share this post


Link to post
Share on other sites
Rob
Please provide a link to your site so we can see what's happening and determine best solutions.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
djcsuomi
OK the site is up now, www.amirproject.org What I want to change is when you bring a drop down menu up, the parent turns blue. I want to know the CSS pointer to change that.

Share this post


Link to post
Share on other sites
Rob
Did you go to Dashboard > PlatformPro > Design Control and find where the blue is and simply change it there? You shouldn't actually need CSS for that.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
djcsuomi
#1. That doesnt really answer my question as I am trying to more fully learn the CSS pointers inside of platform pro #2. I already mentioned that I know which design control option changes that color #3. If I were to change that design control option it would change the color of some other site elements that I do in fact want to be blue.

Share this post


Link to post
Share on other sites
kastelic
I think this is what you are looking for: [code] .sfHover{background:red !important} [/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×