[Resolved] Two menu problems

Home Forums Support [Resolved] Two menu problems

Home Forums Support Two menu problems

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #357074
    Cristina

    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?

    Complete

    Content

    Thank you very much πŸ™‚

    #357095
    Leo
    Staff
    Customer Support

    Hi there,

    Can you link me to the site possibly? Thanks!

    #357097
    Cristina

    Sure! Here it is. Thanks!

    #357176
    Leo
    Staff
    Customer Support

    1) 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

    #357298
    Tom
    Lead Developer
    Lead Developer

    1. This topic might be a push in the right direction: https://generatepress.com/forums/topic/sticky-menu-offset/

    Let me know πŸ™‚

    #357633
    Cristina

    Thanks 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.

    #357685
    Leo
    Staff
    Customer Support

    Try 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 πŸ™‚

    #358122
    Cristina

    I changed the px number to 1150px, and the navigation bar (the header too) disappeared πŸ™

    #358125
    Leo
    Staff
    Customer Support

    is the mobile header feature still activated in the customizer? https://docs.generatepress.com/article/mobile-header/

    #358133
    Cristina

    I 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.

    #358143
    Tom
    Lead Developer
    Lead Developer

    Weird, 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.

    #358158
    Cristina

    Thanks Tom, but it is still not working πŸ™

    #358438
    Tom
    Lead Developer
    Lead Developer

    Can you try excluding jquery.js from any caching/deferring plugins you have activated?

    #358511
    Cristina

    Yes, I deactivated Async JavaScript, Autoptimize (which only had activated the html and css optimization), and the cache plugin, but it is still not working πŸ™

    #358640
    Tom
    Lead Developer
    Lead Developer

    Hmm, I’m not seeing the above code added.

    Can you remove that function and try the first method again (in the wp_footer hook)?

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.