Tagged: fullwidth submenu
-
AuthorPosts
-
January 7, 2016 at 11:11 am #561103
HI
I would like to change the color of the fullwidth sub menu item when it reaches its specific content section related to the id given. currently it only highlight if you click on it, so if i should scroll to any other section the link clicked on stays highlighted.
- This topic was modified 8 years, 11 months ago by Diezel23.
January 7, 2016 at 5:54 pm #561395Hey Gavin!
Instead of using custom menu, can you please go to Appearance > Menus and create a new menu with your anchor points and then edit your element and choose to display that menu?
Best regards,
YigitJanuary 7, 2016 at 8:25 pm #561481Hi Yigit
It is a created menu that needs to go to each section related to the id
January 8, 2016 at 6:40 am #561840Hey!
Please add this code in the functions.php file courtesy of Marcus Ekwall from jsfiddle:
// menu active function add_custom_script(){ ?> <script> (function($){ // Cache selectors var lastId, topMenu = $(".av-subnav-menu"), topMenuHeight = topMenu.outerHeight(), // All list items menuItems = topMenu.find("a"), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var item = $($(this).attr("href")); if (item.length) { return item; } }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href=#"+id+"]").parent().addClass("active"); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
Use this in the Quick CSS field afterwards:
#top .av-subnav-menu > li > a:hover, #top .av-subnav-menu > li.active > a { background: #2F3F4F; color: #FACC08; }
Regards,
IsmaelJanuary 12, 2016 at 12:27 pm #563831Hi Thanks for this
There is still an issue however.
If you click on the relevant link to scroll to the section and then just scroll further or up, the clicked link still stays highlighted regardless if it is on the correct section or not.
You can see it on the link I provided
January 13, 2016 at 6:20 am #564352Hi!
Did you remove the code? Please add it again then post the login details here. We will check it.
Best regards,
IsmaelJanuary 13, 2016 at 9:53 am #564456No the code is not removed, if you followed the steps I have stated above you will see what i mean.
The clicked menu item and the scrolled item will be both highlighted if you should scroll to a different section and not click on the link.Login in details?
Are you wanting to get into the backend?
January 14, 2016 at 3:52 am #565184Hi,
Yes, we will need WordPress login details to check the code. Please post them in the Private Content area of your reply.
Regards,
RikardJanuary 14, 2016 at 9:57 am #565283Hi
Herewith the login details
January 15, 2016 at 5:12 am #565940Hi!
We added a little css modification. Please remove browser cache or hard refresh the page.
Best regards,
IsmaelJanuary 15, 2016 at 7:15 am #565961Thanks a mill Ismael
I appreciate your support and effort.January 16, 2016 at 5:13 am #566434February 3, 2016 at 4:24 am #576830Hello,
I have the same problem, the link jumps to the link before when the one suppose to be active , can you also take a look at my site code.
Thank you in advance
February 3, 2016 at 4:35 am #576840add this to your css
#top .av-subnav-menu>li>a:focus { background: transparent; color: #FFFFFF; } #top .av-subnav-menu > li > a:hover, #top .av-subnav-menu > li.active > a { background: #000000; color: #fffff; }
February 3, 2016 at 4:36 am #576842Thank you for quick reply. Do you mean only this css or css and php code up together?
February 3, 2016 at 4:42 am #576845No it doesn’t help the function, the problem is when i click the link it highlights the link before not the active one.
February 3, 2016 at 4:43 am #576846You need to add the php above that ishmael gave to the functions.php page and then the css i just gave you to your style.css
February 3, 2016 at 4:48 am #576851Yes I added that code to function.php, but the problem continues for example I am clicking second link ( active) but the first link highlighting.
- This reply was modified 8 years, 10 months ago by dilge.
February 3, 2016 at 6:15 am #576890@dilge Can you perhaps post the link to the site in question?
February 3, 2016 at 6:55 am #576907Thank you for your help. Have a wonderful day
February 4, 2016 at 5:16 am #577550February 4, 2016 at 5:21 am #577555Hi @Rikard
Thank to Kriesi team they fixed the php issue and the function work perfectly, I just have another issue regarding css. I created another reply under the topic i started, you can follow from the link below.
Let me know if you can help me figure out why the css rule is not working.
Thank you in advance
February 5, 2016 at 5:39 am #578254 -
AuthorPosts
- The topic ‘Change Fullwidth Sub Menu color on scroll’ is closed to new replies.