Forum Replies Created
-
AuthorPosts
-
Hi both
thank you for taking the time to investigate a solution. Unfortunately neither of these are exactly what I’m look for. I need the other non-hover items to dim like the example Mike mentioned, and yes that’s where I saw it first.
Richard
Hi Yigit
I’ve added an account, see below.
Thanks
RichardHiya, I used the post.
Thanks
Thanks Mike that worked a treat and scrolling just fine now.
RichardHi Ismael
Thanks for the suggestion. In the end this script worked a treat, for any one else needing a solution
<script> (function($){ var calc_scroll = function() { var header = $('#header').height(), scroll = $(window).scrollTop(); if(scroll >= 450) { $('#sub_menu1').css('padding-top', '30px'); } else { $('#sub_menu1').css('padding-top', '0px'); } } $(window).scroll(function() { calc_scroll(); }); })(jQuery); </script>
Adjust your scroll height for where the navigation starts and padding for when it hits the top of the browser window
Richard
Thanks Victoria, would you happen to know how to fix.
Thanks
RichardHiya. I’ve been adjusting code so it may look different now. The space is 40px. I found a CSS hack by adding
margin-bottom:-40px
to the div above the submenu and then addingmargin-top:40px
to the submenu. However as the element above is not fixed across the site it’s hard to replicate dynamically.Richard
Hi Mike
No that part is working OK, it’s the white space above the grey box that only appears after the initial scroll that’s annoying me.
Richard
Hi Mike
The initial appearance on scroll sticks to the top in the right place, but when you scroll back down you’ll see the white space appear. I’ve reverted to the code from earlier and added you changes.
Richard
Hi Mike
Thanks for looking again and yes I’ve been messing with some custom JS to control the start point. Currently seeing if this will work
add_action( 'wp_footer', 'enfold_customization_custom_scripts' ); function enfold_customization_custom_scripts() { ?> <script type = "text/javascript"> jQuery(document).ready(function(){ // var menu = document.querySelector('#sub_menu1') var menuPosition = menu.getBoundingClientRect().top; window.addEventListener('scroll', function() { if (window.pageYOffset >= menuPosition) { menu.style.position = 'fixed'; menu.style.top = '40px'; } else { menu.style.position = 'static'; menu.style.top = ''; } }); // </script> <?php }
Unfortunately the CSS adjustments you suggested don’t work. Will keep trying.
Richard
Hi Mike
The grey navigation is not supposed to have the padding above it. The menu items should be sitting central in a box only 30px deep.
Richard
Thanks Mike
I’ve had a look and it’s partially solved the problem with this adjustment
// custom script function add_custom_script(){ ?> <script> (function($){ function g() { var scrolled = $('.header-scrolled').length; if( scrolled == 1 ) { $('#sub_menu1').css('margin-top', '0px'); } else { $('#sub_menu1').css('margin-top', '30px'); } } $(window).scroll(function() { g(); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
However the pixels added to the margin remain even when the user scrolls back the other way.
Ideally I need to change the start position of the sticky when it hits the top of the browser.
Richard
Half way there with
#header_main { height: 100px !important; top: 30px; } #header_meta { position: fixed; width: 100%; top: 30px; }
But still need some help changing the sticky position of the submenu.
Thanks
Thanks Victoria, will do.
Hi Ismael
Perfect thank you very much for the extra code. Works like a dream.
Richard
Ismael
I’ve added the following to functions:
add_action('ava_after_main_title', 'ava_after_main_title_mod'); function ava_after_main_title_mod() { if( is_singular('post') ) { echo do_shortcode("[av_submenu which_menu='' menu='4' position='center' color='main_color' sticky='aviaTBsticky' mobile='disabled'] [av_submenu_item title='Treatments' link='manually,http://' linktarget='' button_style=''] [av_submenu_item title='Spa Days' link='manually,http://' linktarget='' button_style=''] [av_submenu_item title='Fitness' link='manually,http://' linktarget='' button_style=''] [av_submenu_item title='Fashion' link='manually,http://' linktarget='' button_style=''] [av_submenu_item title='Health' link='manually,http://' linktarget='' button_style=''] [av_submenu_item title='Special offers' link='manually,http://' linktarget='' button_style=''] [/av_submenu]"); } }
Which has worked for posts only. However it’s pushing the widget column down the page. See link.
Any idea how to fix?
Thanks
RichardHi Ismael
Thanks for this but do you mean add this example to the single.php file or in to the functions file?Richard
This reply has been marked as private.Hi Ismael
In the end I’ve styled each sub-nav using it’s unique id. It’s not the prettiest solution but it works.
Thanks
RichardThanks Basilis but i’m afraid that did not fix the problem.
Richard
Hi John
Thanks for the solution, alas it did not work though – the last menu item was just stacked under the rest.
RichardHi Yigit
That’s awesome – works like a charm. Thanks again for your help.
RichardHi Yigit
That was super fast thank you. That works perfectly – one last thing. Is there a way to make the submenu the same width as the menu without having to include more menu items?
Thanks
RichardNope please close Sarah, thanks.
Hi Rikard
That’s what I suspected, thanks for confirming.
RichardI’ve got a plugin installed to mask the site but this link should work.
Richard
Hi Victoria
OK thanks – do you know which selector it would be. I've tried #top #menu-item-search:hover>a { content: "/ue813"; }
Richard
Thanks Jordan
How do you replace a specific icon for this specific state though on the search menu item?
RichardHi Nikko
That’s fantastic thank you and works fine.
Thanks for your help
RichardHi Basilis
Thanks for looking, yes just fixed it by changing the id to .blog.
Richard
-
AuthorPosts