Jump to content
Sign in to follow this  
rljmedia

Mainnav & Secondnav CSS targeting issue

Recommended Posts

rljmedia

Hello Pageline Pros, Ok, This portfolio page with the secondNAv is not published on the website as yet in my secondary nav definition for the portfolio page. http://www.rljmedia.com/portfolio/portraits/ MY goal is that when portfolio is pressed it will highlight in orange with the background image above and when the secondary pages are clicked, those pages are highlighted in orange while the portfolio page is highlighted as well. I my fingers and combos of CSS targeting do not seem to be doing the trick. Any help will be much appreciated.

/* ********* Nav Menu ******** */
	#brandnav .content {
	    background:transparent !important;
	    background-color:transparent !important;
	 }
	/* shifts NAV menu down */
	#brandnav .brandnav-nav .main-nav {
	  background:transparent;
	  float:right;
	  margin-left:20px;
	  margin-top:15px;
	}
	
	/*  THIS HIDES THE BORDER AT THE BOTTOM of NAV and Content */
	.navigation_wrap, .fpost {
	    border-bottom: 0 none !important;
	}
	/* ******** Menu Colors Section ****** */
	
	/* Hover over color */
	#brandnav ul#menu-main-menu li.menu-item a:hover {
	  background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important;
	 color:#4B246C;
	  }
	
	/* menu color states */
	.main_nav ul li.current_page_item a {
	  background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important;
	  color:#F15E24 !important;
	 }
	
	
	#nav .navigation_wrap {
	  float:right;
	  margin-top:-38px;
	  position:relative;
	}
	
	/* ***************** Secondary NAV ****************** */
	#secondnav .content {
	    Background:transparent;
	    background-color:transparent;
	    }
	
	#secondnav .content-pad {
	    margin-left: 434px;
	    padding-bottom: 5px;
	    padding-top: 5px;
	    Background:transparent;
	    background-color:transparent;
	 }
	
	/* ****** SecondNAV Image Hover over ********* */
	#secondnav ul#menu-portfolio-menu li.menu-item a:hover {
	      background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important;
	color:#4B246C !important;
	 }
	
	.secondnav_menu li.current-menu-item page_item a {
	background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important;
	color:#F15E24 !important;
	 }
	

Share this post


Link to post
Share on other sites
catrina
The Portfolio link in the main nav can't be highlighted at the same time that the link in second nav is highlighted because technically, the link in second nav is the only link that is selected (since it is a completely separate page from its parent page). However, I think there is a workaround for it. If you want the Portfolio link to be highlighted at all times only when its child pages are selected, we can use CSS to make it permanently highlighted only when those child pages are being viewed. Here's the CSS you should use instead: [code]/* ********* Nav Menu ******** */ #brandnav .content { background:transparent !important; background-color:transparent !important; } /* shifts NAV menu down */ #brandnav .brandnav-nav .main-nav { background:transparent; float:right; margin-left:20px; margin-top:15px; } /* THIS HIDES THE BORDER AT THE BOTTOM of NAV and Content */ .navigation_wrap, .fpost { border-bottom: 0 none !important; } /* ******** Menu Colors Section ****** */ /* Hover over color */ #brandnav ul#menu-main-menu li.menu-item a:hover { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#4B246C; } /* menu color states */ ul.main_nav li.current_page_item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; } body.page-id-234 ul.main_nav li.menu-item-26 a, body.page-id-235 ul.main_nav li.menu-item-242 a, body.page-id-238 ul.main_nav li.menu-item-26 a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; } #nav .navigation_wrap { float:right; margin-top:-38px; position:relative; } /* ***************** Secondary NAV ****************** */ #secondnav .content { Background:transparent; background-color:transparent; } #secondnav .content-pad { margin-left: 434px; padding-bottom: 5px; padding-top: 5px; Background:transparent; background-color:transparent; } /* ****** SecondNAV Image Hover over ********* */ #secondnav ul#menu-portfolio-menu li.menu-item a:hover { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#4B246C !important; } ul.secondnav_menu li.current-menu-item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; }[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
rljmedia
I did add the code and has not worked on the site. the other issue is in the same way when I select a page the color should be orange with the image above and the code is not working on that section as well. The main nav I got it working and second nav is very challenging. [url]http://www.rljmedia.com/portfolio/portraits/[/url]

Share this post


Link to post
Share on other sites
catrina
Replace the code you have for "/* menu color states */" with this code: [code]ul.main_nav li.current-menu-item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; }[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
rljmedia
Hi Catrina, Nothing has changed after adding. [url]http://www.rljmedia.com/portfolio/portraits/[/url] I will go to fencing class now and hope we can solve together. thank you for putting time and energy into this. I wanna learn and solve this. Roger

Share this post


Link to post
Share on other sites
catrina
Try this one (whenever you get back): [code]ul#menu-main-menu .main_nav li.current-menu-item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; }[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
rljmedia
Hello Catrina, I had a great practice and Kendo today and came home and tried the code and it did not function correctly. This issue is special for me and I know it can be solved, just not sure how. Thanks again for your energy and time to help. [url] http://www.rljmedia.com/portfolio/portraits/[/url] Roger

Share this post


Link to post
Share on other sites
rljmedia
[url] http://www.rljmedia.com/portfolio/portraits/[/url]

Share this post


Link to post
Share on other sites
catrina
Do you have any other custom CSS other than the CSS you've posted specifically for the navigation menu?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
rljmedia
This is the entire header section code: [code]/* ********* Nav Menu ******** */ #brandnav .content { background:transparent !important; background-color:transparent !important; } /* shifts NAV menu down */ #brandnav .brandnav-nav .main-nav { background:transparent; float:right; margin-left:20px; margin-top:15px; } /* THIS HIDES THE BORDER AT THE BOTTOM of NAV and Content */ .navigation_wrap, .fpost { border-bottom: 0 none !important; } /* ******** Menu Colors Section ****** */ /* Hover over color */ #brandnav ul#menu-main-menu li.menu-item a:hover { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#4B246C; } /* menu color states */ ul#menu-main-menu .main_nav li.current-menu-item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; } #nav .navigation_wrap { float:right; margin-top:-38px; position:relative; } /* ***************** Secondary NAV ****************** */ #secondnav .content { Background:transparent; background-color:transparent; } #secondnav .content-pad { margin-left: 434px; padding-bottom: 5px; padding-top: 5px; Background:transparent; background-color:transparent; } /* ****** SecondNAV Image Hover over ********* */ #secondnav ul#menu-portfolio-menu li.menu-item a:hover { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#4B246C !important; } /* menu color states */ ul.main_nav li.current_page_item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; } body.page-id-234 ul.main_nav li.menu-item-26 a, body.page-id-235 ul.main_nav li.menu-item-242 a, body.page-id-238 ul.main_nav li.menu-item-26 a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; }[/code]

Share this post


Link to post
Share on other sites
rljmedia
Hi Catrina, I really hope we can figure this out together. I have these Joomla people laughing at me because they say they can do it so easy in their joomla world. I want to show them that pagelines has the power to do what we want and now with this main and secondnav issue they may be right. I wanna prove them wrong. :)

Share this post


Link to post
Share on other sites
Jenny
This will change "portfolio" to orange and have the arrow above when it is the active menu item. It will also change secondary nav items to behave the same way. And it makes the "portfolio" menu have the same active css when a secondary menu is active: Remove: [code]ul#menu-main-menu .main_nav li.current-menu-item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; }[/code] Replace with: [code]#brandnav .current-menu-item a, #secondnav .current-menu-item a, #brandnav .current-page-ancestor a { background: url('http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png') no-repeat scroll 46% 5% transparent !important; color: #F15E24 !important; }[/code] Hope that helps!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rljmedia
Hi Jenny, A.K.A Simple Mama! (Love that name) I applied the code and has not made any effect as yet. [code]http://www.rljmedia.com/portfolio/portraits/[/code]

Share this post


Link to post
Share on other sites
Jenny
I don't see the CSS changes on your site. Are you sure you saved? Do you have a caching plugin enabled?

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rljmedia
Hi Mama, Looks like your are right. Changes not saved. Now the second nav does not appear. [code]http://www.rljmedia.com/portfolio/[/code]

Share this post


Link to post
Share on other sites
rljmedia
Entire code section looks like this now. [code]/* ******** Menu Colors Section ****** */ /* Hover over color */ #brandnav ul#menu-main-menu li.menu-item a:hover { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#4B246C; } /* menu color states */ #brandnav .current-menu-item a, #secondnav .current-menu-item a, #brandnav .current-page-ancestor a { background: url('http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png') no-repeat scroll 46% 5% transparent !important; color: #F15E24 !important; } #nav .navigation_wrap { float:right; margin-top:-38px; position:relative; } /* ***************** Secondary NAV ****************** */ #secondnav .content { Background:transparent; background-color:transparent; } #secondnav .content-pad { margin-left: 434px; padding-bottom: 5px; padding-top: 5px; Background:transparent; background-color:transparent; } /* ****** SecondNAV Image Hover over ********* */ #secondnav ul#menu-portfolio-menu li.menu-item a:hover { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#4B246C !important; } /* menu color states */ ul.main_nav li.current_page_item a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; } body.page-id-234 ul.main_nav li.menu-item-26 a, body.page-id-235 ul.main_nav li.menu-item-242 a, body.page-id-238 ul.main_nav li.menu-item-26 a { background:url(http://www.rljmedia.com/wp-content/themes/pagelines/images/hover_triangle.png)no-repeat 46% 5% scroll transparent !important; color:#F15E24 !important; }[/code]

Share this post


Link to post
Share on other sites
Jenny
If you go to http://www.rljmedia.com/portfolio/portraits/ it looks great. Make sure you have the secondary nav activated for that page.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rljmedia
I checked again and it now works. Thanks simple Mama! I the future I will just cry for Simple Mama! I was looking at the wrong link and it works. [code]http://www.rljmedia.com/portfolio/portraits/[/code] Catrina! Thank you as well! Thank You again.

Share this post


Link to post
Share on other sites
Jenny
haha Glad I could help. :) Don't forget to accept an answer if you consider this topic closed. Thanks!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rljmedia
Hi Simple Mama, Can also explain just a little why I could not solve this and why you targeting of three areas worked. The ancestors area is a mystery to me. I have been praying to my ancestors for years and now I am programming them. :) Thanks again.

Share this post


Link to post
Share on other sites
Jenny
I had the current-menu-item CSS saved from when I helped someone previously so that one wasn't an issue. The current-page-ancestor was more difficult and I couldn't figure it out. But then I saw that it did have a greyish color affecting it, so I inspected the menu item with Firebug and looked for items with background color. There was a huge section of CSS selectors that all had the same background color so I just found the ones I thought would work and then trial and error gave me the answer. :) I'm sure it's not the technical answer you were looking for, but it's what worked for me!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rljmedia
Hey! Thank Mama! Sometimes you have to put in the time to solve the crime. I hope to become simple daddy in the future. :) Thanks again.

Share this post


Link to post
Share on other sites
rljmedia
Thank you for the link Catrina!

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  

×