- This topic has 20 replies, 3 voices, and was last updated 6 years, 7 months ago by Tom.
-
AuthorPosts
-
July 30, 2017 at 9:04 am #357074Cristina
Hi there!
I would like to ask you two questions.
1) I have links in my menu to some sections, using an ID (for example, https://myweb.com/#info or #contact). The problem is that, as the menu is static and sticky, it covers the first part of the section linked. Is there any way to solve this?
2) I have some problems with the size of the menu too. I set it with complete navigation width, and the inner navigation width is content. When I resize the browser, the menu doesn’t have enough space so it shows the links in two rows, looking horrible. If I set it to complete, both logo and links appear right to the extremes. How can I fix this?
Thank you very much π
July 30, 2017 at 9:46 am #357095LeoStaffCustomer SupportHi there,
Can you link me to the site possibly? Thanks!
July 30, 2017 at 9:47 am #357097CristinaSure! Here it is. Thanks!
July 30, 2017 at 11:46 am #357176LeoStaffCustomer Support1) Someone had a similar problem before but I can’t seem to find the solution. Will ask Tom to have a look π
2) You can try initiate the mobile header at a larger width before the menu turns into two rows: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043
July 30, 2017 at 6:11 pm #357298TomLead DeveloperLead Developer1. This topic might be a push in the right direction: https://generatepress.com/forums/topic/sticky-menu-offset/
Let me know π
July 31, 2017 at 10:13 am #357633CristinaThanks Leo and Tom!
I tried the two things and I don’t know why they doesn’t work.
1) I pasted that code into my aditional css using @media (min-width: 500px) and (max-width: 768px). Nothing happened. I tried pasting it as it is in the example, with max 768, but didn’t work as well.
2) I introduced the code in the wp footer, I changed 70 to 65 (the height of my navigation) and I added smooth as a css class in my menu items. Nothing happened too.
I deleted cache, I tried in every device I have, but no changes.
Could you kindly help me? I have to be doing something wrong.
July 31, 2017 at 11:37 am #357685LeoStaffCustomer SupportTry changing the px number to 1150px in this code: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043
As for the sticky menu offset I’ll ask Tom to take another look π
August 1, 2017 at 9:12 am #358122CristinaI changed the px number to 1150px, and the navigation bar (the header too) disappeared π
August 1, 2017 at 9:22 am #358125LeoStaffCustomer Supportis the mobile header feature still activated in the customizer? https://docs.generatepress.com/article/mobile-header/
August 1, 2017 at 9:37 am #358133CristinaI didn’t. Now that I enabled it, the menu doesn’t work (I click in the hamburger and nothing appears), the navigation on my mobile phone now is in two rows, and the header is still dissapeared.
August 1, 2017 at 9:56 am #358143TomLead DeveloperLead DeveloperWeird, I posted this last night, guess it didn’t come through.
The smooth scrolling you added isn’t working as your jQuery file is deferred, so it’s showing up after the code that requires it.
So, remove that code from the wp_footer hook, and try adding this function:
add_action( 'wp_enqueue_scripts', 'tu_add_smooth_scroll' ); function tu_add_smooth_scroll() { if ( function_exists( 'wp_add_inline_script' ) ) { wp_add_inline_script( 'jquery', "jQuery(function($) { $('li.smooth > a[href*='#']:not([href='#']), a.smooth[href*='#']:not([href='#'])').on( 'click', function(e) { e.preventDefault(); if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 70 }, 500); } } }); });" ); } }
Adding PHP: https://docs.generatepress.com/article/adding-php/
Doing this should fix the above issue as well.
August 1, 2017 at 10:25 am #358158CristinaThanks Tom, but it is still not working π
August 2, 2017 at 12:25 am #358438TomLead DeveloperLead DeveloperCan you try excluding jquery.js from any caching/deferring plugins you have activated?
August 2, 2017 at 4:21 am #358511CristinaYes, I deactivated Async JavaScript, Autoptimize (which only had activated the html and css optimization), and the cache plugin, but it is still not working π
August 2, 2017 at 9:51 am #358640TomLead DeveloperLead DeveloperHmm, I’m not seeing the above code added.
Can you remove that function and try the first method again (in the wp_footer hook)?
-
AuthorPosts
- You must be logged in to reply to this topic.