-
AuthorPosts
-
June 13, 2016 at 3:51 am #647118
Hello,
I have a one page design setup for the home page of the site, which is working perfectly. When I would go to a section of the website, the menu item text would be highlighted lighter than the other menu items. (e.g. I click on “Services” and go to that section and the word “Services” is white and the other menu items are grayed out.)
I wanted to incorporate a blog, but was having a hard time setting up a menu for the home page with links like “#services” for the link and then a menu setup for the blog and post pages with a link like “http://rocketleads.net/#services” for the header menu items.
I came across a plugin that allows you to pick which menus you want for each post, page, etc. It works perfectly, but the problem is that every menu item on the home page is now white (highlighted). Is there a way for me to have the menus highlight as they were before?
I did try to incorporate one menu for the entire site and just use “http://rocketleads.net/#services” for the menu items (instead of just “#services” as the link), but that made all of the menu items highlight, too. Maybe this is the way to go.. I just need some CSS to fix the highlighting menus items? Not sure..
EDIT 1: My site speed has slowed down tremendously since I added the above-mentioned plugin to pick which menus go with which page/post/etc., so I am going to be removing that plugin. Hopefully, making the links the full link instead of just the hashtag will work.. I will just need to figure out to have the menu items highlight correctly.
EDIT 2: Something else I noticed is that when I am on a blog post, the “HOME” menu item is highlighted, but I am technically not on the home page. If I change this from “http://rocketleads.net/#top” to just “http://rocketleads.net” it will not work on the home page. You can see what I am talking about at the blog post below:
EDIT 3: I have found one option which includes removing “HOME” from the menu item bar at the top. I would prefer to keep it up there, but will do it as a worst case scenario.
Also, if there is a better way to handle what I am trying to do, please let me know. I am open for any ideas and recommendations. Again, I am trying to have a one-page home page, a separate blog page and separate post pages.
One page homepage: http://rocketleads.net
Blog page: http://rocketleads.net/blogThanks,
Chris- This topic was modified 8 years, 4 months ago by chrisbelote.
June 16, 2016 at 3:17 am #648925Hey Chris,
Thank you for using Enfold.
Please add this in the Quick CSS field to fix the active menu highlight:
.header_color .main_menu ul:first-child>li>a { color: #fff; } .header_color .main_menu ul:first-child>li.current-menu-item>a { color: #889095; } .header_color .main_menu ul:first-child>li.current_page_item.current_page_parent>a { color: #889095; }
Best regards,
IsmaelJune 19, 2016 at 11:53 pm #650529Hi Ismael,
Thank you! I had to flip the colors, but this worked perfectly.
1) How do I make the text white when the mouse hovers over the menu items?2) How do keep the “HOME” menu item grayed out (not highlighted) when I am on the page for a blog post, author page, category page, keyword page, etc.? See link below.
3) The menu item highlighting on the home page seems to mess up in an IE web browser. It works fine in Chrome. Any ideas?
Thanks,
Chris- This reply was modified 8 years, 4 months ago by chrisbelote.
June 21, 2016 at 3:45 am #651199Hi,
2.) Weird. It shouldn’t be highlighted. Please add this at the very bottom of the Quick CSS field:
.single .header_color .main_menu ul:first-child>li.current-menu-item>a, .archive .header_color .main_menu ul:first-child>li.current-menu-item>a { color: gray !important; }
3.) Which version of IE? Could you please provide a screenshot?
Best regards,
IsmaelJune 21, 2016 at 5:03 am #651230Hi Ismael,
I tried the code above for #2 and it did
notgray out the “HOME” menu item. There is still an orange highlight bar under the “HOME” menu item.. any ideas on how to remove that, too?Thanks,
Chris- This reply was modified 8 years, 4 months ago by chrisbelote.
June 22, 2016 at 5:59 pm #652298Hi,
there is no orange highlight bar anymore for me:
Please clear browser cache and hard refresh a few times.
Best regards,
AndyJune 22, 2016 at 10:07 pm #652387Hi Andy,
This is in reference to the blog posts, keyword pages, category pages, author pages, etc. See below:
Thanks,
ChrisJune 25, 2016 at 8:43 am #653311Hi,
Thank you for the screenshot. Please add this:
.single .header_color .main_menu ul:first-child>li.current-menu-item>a .avia-menu-fx, .archive .header_color .main_menu ul:first-child>li.current-menu-item>a .avia-menu-fx { display: none; }
Best regards,
IsmaelJune 25, 2016 at 4:13 pm #653368Ismael,
That worked perfectly!
Last question.1) Is there something I can remove in the above code that will allow the “orange bar” on mouse over like the other menu items? Go to this page and hover over “HOME” and “WHY US” menu items to see what I am talking about..
http://rocketleads.net/category/business-development/
2) On the blog page, the “HOME” menu item and “BLOG” menu item are highlighted. Also, the “HOME” menu item has the orange bar under it and the “BLOG” menu item does not. See below:The website is http://rocketleads.net/blog
Thanks,
Chris- This reply was modified 8 years, 4 months ago by chrisbelote.
June 29, 2016 at 5:18 am #654593Hi,
Thank you for the info. Please add this below the other css code:
.single .header_color .main_menu ul:first-child>li.current-menu-item>a:hover .avia-menu-fx, .archive .header_color .main_menu ul:first-child>li.current-menu-item>a:hover .avia-menu-fx { display: block; }
Best regards,
IsmaelJune 29, 2016 at 5:11 pm #654922Worked perfectly! Thank you, Ismael!!
Chris
-
AuthorPosts
- The topic ‘One Page Menu Item Highlighting’ is closed to new replies.