[Resolved] Adding a responsive secondary footer menu

Home Forums Support Adding a responsive secondary footer menu

  • This topic has 60 replies, 3 voices, and was last updated 5 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 61 total)
  • Author
    Posts
  • #133891
    Mo

    Hi Tom,
    Congratulations on a fantastic theme.
    Best find on WordPress.org in some time.
    The versitility of the free theme is amazing
    The addons make it so there’s no excuse for running dry of ideas for website layouts, color, etc.
    Does away with needing to add more 3rd party plugins.

    ===

    I’ve only just started building this site and wanted to make certain the plan for site navigation
    could be implemented.

    Using the generatepress child theme and having great time playing with all the features of GeneratePress.

    So far, everything I’ve experimented with has worked flawlessly.

    That is until trying to add something of my own…

    Question:
    As you see on this DEV site XPRESSNET a third secondary menu has been added.

    It displays properly but when it’s toggled for mobility, it breaks.

    No shock really as there was a concern about calling the same code twice.

    Is this a javascript conflict due to attempting to call an identical ID?

    Can this be remedied?

    If this is a very complex issue, I’ll make alternative plans for the site navigation.

    thanks for your assistance.

    #133954
    Tom
    Lead Developer
    Lead Developer

    Hi Robert,

    Glad you’re enjoying the theme!

    How did you duplicate the secondary navigation like that out of curiosity?

    There seems to be a bunch of jQuery added to the bottom of the site (highlight it on the black background). This tells me there might be a jQuery error somewhere that’s causing this.

    Let me know 🙂

    #134165
    Robert

    Hi Tom,

    Amazing response time… kudos to you!

    Thanks for catching the code snippet. Darn sloppy on my part as i completely forgot that had been inserted there. (A left over from messing with some Woocommerce mod)

    Removing it did not change the situation.

    Now I’m nowhere as qualified a developer as yourself.

    I could only dream of having your level of expertise.

    As with any new theme I’m picking it apart to see what impact I can have on any coding i do understand.

    Adding the third/footer menu was a shot in the dark to achieve what was possible with the previous free theme.

    Basically I had a secondary menu in “Menu Locations” pointing to the header menu.
    Then another secondary menu pointing to the Footer menu.
    I thine copied the code from the Footer menu that was positioned under the header into the footer placement you see.

    The free theme allowed for primary, secondary and tertiary menus, which I favor as I’m a firm believer in making site navigation for the user as easy and logical as possible.

    Long story short… Toggle icon appears as it should when in mobile but the flyout is broken.
    With my limited knowledge of things javascript and jQuery, I can only assume that there’s a problem calling identical nav menus.

    My other option is to use the “menu +” addon but the footer is where i would like some navigation.
    A menu list could be made and using CSS align them horizontally.
    Other CSS could be figured out.

    Was adding a third nav supposed to be messy?
    It’s just the Javascript & jQuery that’s my usual weak area.

    Appreciate your feedback and your fantastic GP project.

    Regards,
    Robert

    #134207
    Tom
    Lead Developer
    Lead Developer

    Yea this is happening because there can’t be two secondary-navigation IDs as far as the JS is concerned.

    You’ll have to change the “secondary” word to something else throughout your third menu. This will probably lose you some styling, but you can just add some CSS to style it back.

    Then you’ll need to add this JS, assuming you replaced “secondary” with “tertiary”: https://gist.github.com/generatepress/56e84848ee0c6ab6bdb4

    Let me know if you need more info 🙂

    #134423
    Robert

    Thanks for confirming that Tom.

    I was looking at the navigation.php file in the Inc folder and thought that perhaps adding some new code to indicate a tertiary menu might be required.

    As it is, it’s a matter of modifying an exiting JS file.
    As mentioned previously <i’m no coding wizard but certainly willing to give it a go.

    I appreciate you pointing me to the correct JS file.

    I’ll keep you posted as to success or failure.

    There’s bound to be an acceptable alternative if this doesn’t work.

    ===

    There’s a possible issue that’s come up with how GeneratePress loads a Woocommerce page, however that will be in a new thread if needed.

    Thanks again.

    Regards,
    Robert

    #134438
    Tom
    Lead Developer
    Lead Developer
    #134465
    Robert

    Hi again Tom.

    Question regarding the gistfile1.txt with the navigation.js

    Was that block of code to be added to the existing navigation.js in the Parent theme of GeneratePress?

    Can it be placed in a js folder in the child theme folder or does it need to be in the original Parent theme JS folder?

    ===

    Progress so far.

    Changed all references to ‘secondary” to “tertiary” in the footer.

    Played around with CSS and ended up with what you see now.

    When the browser is reduced, the toggle icon appears but still does not flyout.

    The 4 links also remain visible so I’m guessing it needs some CSS to hide it at the correct media break?

    Placement and color styling are not right but that’s not the primary issue.

    I’d appreciate any suggestions.

    Thanks again.

    #134512
    Tom
    Lead Developer
    Lead Developer

    You should place it inside its own file in your child theme.

    For example, if you place it in a “js” folder in your child theme, you could then add this function to your child theme’s functions.php to add it to the site:

    add_action( 'wp_enqueue_scripts','generate_add_child_theme_scripts' );
    function generate_add_child_theme_scripts()
    {
          wp_enqueue_script( 'tertiary-nav', get_stylesheet_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
    }

    You’ll also need to add this CSS: https://gist.github.com/generatepress/4860e09d80c73b18bf73

    Then you’ll have to style it, which will take some extra CSS fiddling, but this should get you well on your way 🙂

    #134555
    Robert

    Progress update.

    Added code to functions.php and uploaded to child theme.
    Added CSS code with the new breakpoints and uploaded to child theme.
    Added JS code from yesterday into unique JS file and uploaded to JS sub-folder in child theme.

    Results:
    The footer toggle icon now changes from the triple line to an X.
    Footer menu items are visible as a flyout as soon as the page goes mobile instead of being hidden.

    Question:
    All the code you’ve provided has been checked just to make sure that I’ve copied it all correctly.
    Something strange in the navigation.js code from yesterday using the edit function in CuteFTP.
    For a reason unknown to me, the code is grayed out, (as if commented out) from line 50 to line 86.

    This is the exact portion that’s grayed out:

    < len; i++ ) {
    		tertiary_subMenus.parentNode.setAttribute( 'aria-haspopup', 'true' );
    	}
    
    	// Each time a menu link is focused or blurred, toggle focus.
    	for ( i = 0, len = tertiary_links.length; i < len; i++ ) {
    		tertiary_links.addEventListener( 'focus', toggleFocus, true );
    		tertiary_links.addEventListener( 'blur', toggleFocus, true );
    	}
    
    	/**
    	 * Sets or removes .focus class on an element.
    	 */
    	function toggleFocus() {
    		var tertiary_self = this;
    
    		// Move up through the ancestors of the current link until we hit .nav-menu.
    		while ( -1 === tertiary_self.className.indexOf( 'nav-menu' ) ) {
    
    			// On li elements toggle the class .focus.
    			if ( 'li' === tertiary_self.tagName.toLowerCase() ) {
    				if ( -1 !== tertiary_self.className.indexOf( 'focus' ) ) {
    					tertiary_self.className = tertiary_self.className.replace( ' focus', '' );
    				} else {
    					tertiary_self.className += ' focus';
    				}
    			}
    
    			tertiary_self = tertiary_self.parentElement;
    		}
    	}
    } )();
    
    jQuery(window).load(function($) {
    	
    	// Add dropdown toggle that display child menu items.
    	jQuery( '.tertiary-navigation .page_item_has_children >

    In Notepad++ and Dreamweaver, I’m not seeing anything similar or indicating errors.

    Perhaps it’s just a quirk that’s unique to CuteFTP.

    Is this preventing the menu from behaving properly and if so, what am I not seeing?

    With your help, having a working responsive footer menu is just about there. (Except for CSS but I think I can figure that out).

    Don’t know if you’re off for the weekend but I can wait until the new week for your response.

    Thanks!

    #134584
    Tom
    Lead Developer
    Lead Developer

    Weekend? What’s that? 😉

    The JS should be fine – just copied it straight from the theme and change the classes.

    Looks like your CSS has some errors in it.

    Wherever you have --------------------- and ============ needs to be removed – that’s not valid CSS unless they’re within the comment.

    Once that stuff is removed it should work.

    #134598
    Robert

    I expect that sleep is another surreal concept 🙂

    Sorry to say that after cleaning up my sloppy non-CSS entries there’s no change.

    The mobile still appears fully expanded.

    the toggle seems active although it’s hard to tell until it’s working in tandem with the menu.

    Rechecked the files and paths.

    They seem okay.

    Obviously there’s something I’m not seeing.

    Thanks.

    #134618
    Tom
    Lead Developer
    Lead Developer

    Ah I see the issue.

    You have: media (max-width: 768px) {

    It should be: @media (max-width: 768px) {

    #134624
    Robert

    Score!!!

    That was it Tom.

    The “@” is missing from the code page GitHub

    Hey, I’ll forgive you as your help has been invaluable and speedy (understatement)!

    I plan to write a + review for GP when this website is somewhat more complete.

    If other issues arise it’s a no brainer that GP support will resolve it!

    #134626
    Tom
    Lead Developer
    Lead Developer

    That was my bad – somehow missed it when I copy and pasted.

    A review over on WordPress.org would be hugely appreciated, thanks! 🙂

    #136320
    Mo

    Hi Tom,
    Just to clear up, My name is actually Mo… Robert is the client who bought the theme:)

    ===

    Anyway the saga continues with the responsive footer menu.

    I thought that it would be a good idea to style the menu to accommodate drop-down links in a sub-menu.
    Unfortunately it hasn’t been as “copy and paste” as i thought it would be.

    The header menu currently is displaying what the footer menu is to display.
    The correct CSS eludes me and there have been issues wither with the drop-down not appearing or displaying the sub-menu as soon as it’s active.

    Fully expanded i how the footer is currently displayed so the obvious question is, how to style it correctly so it’s collapsed as it should be.

    The mobile appears to be working correctly.

    dev wordpress

    ===

    I’m still exploring and enjoying what GP is capable of.

    With the exception of my attempts at additional mods GP has been performing flawlessly.

    This includes any 3rd party plugin that’s been installed.

    There have been quite a few, although I’m trying to keep the number down which is why I’ll try to add custom coding instead.

    Thanks!

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