Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 13, 2016 at 3:51 am #647118
    chrisbelote

    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:

    7 Simple Ways to Improve Your Business Overnight

    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/blog

    Thanks,
    Chris

    • This topic was modified 8 years, 5 months ago by chrisbelote.
    June 16, 2016 at 3:17 am #648925
    Ismael

    Hey 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,
    Ismael

    June 19, 2016 at 11:53 pm #650529
    chrisbelote

    Hi 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?

    7 Simple Ways to Improve Your Business Overnight

    Thanks,
    Chris

    • This reply was modified 8 years, 5 months ago by chrisbelote.
    June 21, 2016 at 3:45 am #651199
    Ismael

    Hi,

    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,
    Ismael

    June 21, 2016 at 5:03 am #651230
    chrisbelote

    Hi Ismael,

    I tried the code above for #2 and it did not gray 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, 5 months ago by chrisbelote.
    June 22, 2016 at 5:59 pm #652298
    Andy

    Hi,

    there is no orange highlight bar anymore for me:

    View post on imgur.com

    Please clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    June 22, 2016 at 10:07 pm #652387
    chrisbelote

    Hi Andy,

    This is in reference to the blog posts, keyword pages, category pages, author pages, etc. See below:

    https://snag.gy/89Uf3r.jpg

    Thanks,
    Chris

    June 25, 2016 at 8:43 am #653311
    Ismael

    Hi,

    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,
    Ismael

    June 25, 2016 at 4:13 pm #653368
    chrisbelote

    Ismael,

    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:

    https://snag.gy/Gzk5cT.jpg

    The website is http://rocketleads.net/blog

    Thanks,
    Chris

    • This reply was modified 8 years, 5 months ago by chrisbelote.
    June 29, 2016 at 5:18 am #654593
    Ismael

    Hi,

    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,
    Ismael

    June 29, 2016 at 5:11 pm #654922
    chrisbelote

    Worked perfectly! Thank you, Ismael!!

    Chris

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘One Page Menu Item Highlighting’ is closed to new replies.